Body background fluke - white space on top

Question

This is really weird. When this page is viewed in FF, it gets a white stripe on top which is part of body - I know because I use red border technique to see the elements.

Any ideas why? http://www.codecookery.com/allbestimages/index.php?main_page=home

Answer 1

try adding:

#main-page-body-wrapper{
  height: 0px;
}

or set the background color to black. I checked it out in chrome and firefox. Used firebug and the chrome inspect element tool. This is not the body that is creating the white space but the #main-page-body-wrapper element.

Answer 2

The problem is that your #slideshow element is positioned absolutely. This removes it from the normal page flow and therefore your #main-page-body-wrapper is essentially empty and just sitting at the top of the page.

I suggest you avoid absolute positioning unless you're really, really sure you need it. I'd recommend making a few changes. First of all get rid of the absolute positioning:

#slideshow {
    height: 541px; /* Height of the slideshow */
    position: relative;
    /* Remove width, left, top and margins from here */
}

position: relative; in the above block sets the current position as the starting point for any child elements that are absolutely positioned (such as your slideshow images). If this doesn't make sense then check out:

http://css-tricks.com/absolute-positioning-inside-relative-positioning/

You don't need width: 100% on divs and other block-level elements because that is the default so remove that:

#main-page-body-wrapper  {
    /* Remove width from here */
    text-align: center; /* IE6 centering Part 1 */
}

#main-page-inside-wrapper  {
    margin: 0 auto;
    overflow: hidden;
    padding: 10px 0 0;
    width: 1000px; /* Width of the slideshow */
    text-align: left; /* IE6 centering Part 2 */
}

I don't see why you should need #content-wrapper inside #main-page-inside-wrapper - it doesn't look like it's doing anything. You should try to keep your HTML as simple as possible to avoid mess and confusion; You only really need 2 divs to do cross-browser centering like you're doing so I'd get rid of #content-wrapper if I were you.

This is by no means a complete solution but should help you get to where you're going. Good luck!

Answer 3

got it, thanks. had to set padding/margin to 0.