Posted by Ben C on 11/29/07 18:52

On 2007-11-29, Tomasz Chmielewski <tch@nospam.syneticon.net> wrote:
> I have a problem with CSS. Generally, my site looked good in Firefox and
> IE7, but then, I wanted to see how it looks in IE6 (which still has over
> 30% of the market) - the result wasn't that great, the page looked ugly.
>
> So I made various changes, and now the page looks good in IE6 and IE7.
> In Firefox however, a background image is not displayed when I add a
> "float" element to CSS. Where is the problem?
>
>
> An example code is here:
>
> http://wpkg.org/cssproblem.html
>
>
> Expected result: "left column" and "right" column" written on respective
> parts of the image. The image is available here: http://wpkg.org/sub2_bg.png
>
> Result: IE6, IE7 - OK
> Firefox - image is not displayed
>
> When "float:left;" is commented out in #left_column, the image is
> displayed in Firefox (but then, the text in the columns is messed).

It's because your containing div has zero height, because it doesn't
have any contents, except for floats, which don't count.

IE is getting this wrong.

Give #wrapper overflow: hidden and it will grow to the height of the
floats and you will see your background images.

And get rid of width:100% on #wrapper, it's pointless (unless it's for
some weird IE bug I don't know about).

[Back to original message]