Firefox not showing background of div

[Geezer D]

Hi, all.

Can someone have a looksee and tell me what I did wrong here:
http://www.defossesdesign.com/mockups/bigsky/

The repeating background doesn't appear on the #contentbox div in Firefox.

Firefox also has a big empty space at the bottom for some reason.

I put all the CSS in the index source code.

Thanks in advance.

[Medyman]

That's because #contentbox has no calculated height. When you float an element, it (for all practical purposes) removes itself physically from that element. Though, it is bounded by the parent element's boundaries (unless absolutely positioned).

To fix this, simply add the following before the closing <div> tag of #contentbox

<br style='clear:both;' />

[Geezer D]

Great, thanks a lot.

I probably went about it the wrong way, seams odd that I'd have to do that.
I never learn this stuff, it seams I spend 3 or 4 hours fighting with the layout everytime I make a site starting with code from a tutorial, lol.

Any clue why FF has the bigger open space at the bottom?

Maybe something to do with "display:table" ?

[Medyman]

Any clue why FF has the bigger open space at the bottom?

Different browsers will render the overall height differently. If you want something 100% the same, you could set a height on #contentbox. That would get rid of the need for the <br /> clearing fix.

[olveyphotodesign]

Any clue why FF has the bigger open space at the bottom?



#outerbox {
background: url(images/main_header.jpg) no-repeat center top;
width: 950px;
margin:120px auto 0px;
}

The large open space at the bottom is generated from your #outerbox margin. To remove it, you need to specify the bottom margin separately from the top. Margin: 120px auto applies a 120 pixel margin to both the top and bottom. Adding a third number to the margin attribute will apply a separate margin value to the bottom margin.

Looking at your code, Firefox is displaying it properly while IE is doing it's own thing.

Hope this helps!
Ben

[Geezer D]

Yup, that done it.

Gracias, tovarisch!