CSS background issue after porting site to WordPress

  • Resolved maidanet

    (@maidanet)


    16 years, 2 months ago

    I’m about to pull my hair out.

    I’m porting a site over to WordPress from some unknown proprietary platform. I am basically using the same css file, with some added tweaks for WordPress (mostly for the navigation lists).

    The original site: https://www.csg-pr.com
    The wordpress install: https://csg-pr.com.whsites.net/

    There is a white background behind the header that is supposed to extend all the way around the content of the page, but it stops and only is white in the 50 px padding around the header image.

    Here is the full style sheet: https://csg-pr.com.whsites.net/wp-content/themes/csg-pr/style.css

    You can view the source code from the page.

    But here’s the specific div code that should be giving me the white background – 

    div#framebox {
     padding:50px;
     width: 800px;
     display: block;
     margin:0 auto;
     background-color: #ffffff;
}

    I can’t seem to get the white background to fill the entire framebox div. It works fine on the old site on all browsers. But on Firefox, Safari and Chrome, the background does not extend.

    Any ideas?

Viewing 2 replies - 1 through 2 (of 2 total)

  • Hi

    Firebug is giving me a difficult time trying to work with your new site. Basically you have a float clear in the wrong place.

    You have this
    <div class="clearer"> </div>
    just after the closing </div> for div framebox. It should be the line before the closing tag, not the line after it. I believe that will solve your problem although I couldn’t change the code in firebug for some reason so I couldn’t test that

    Thread Starter maidanet

    (@maidanet)

    Thanks so much for your reply. I did try moving that div and also removing it. But it stayed the same for me.

    But I did find a fix! Thanks to my friend May ??

    I added this line to the framebox style

    div#framebox {
    overflow:hidden;
    padding:50px;
    width: 800px;
    display: block;
    margin:0 auto;
    background-color: #ffffff;
    }

    And voila! – it worked.

    Since I did set the float attribute, the browser wasn’t able to interpret the full height of the div. I didn’t want to set the float attribute because I needed the page to be centered, but not the content, so setting the overflow to hidden forces the browser to recognize the entire div.

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘CSS background issue after porting site to WordPress’ is closed to new replies.