[CSS] background image disappears in Firefox when "float:" is used

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).


"http://www.w3.org/TR/html4/strict.dtd">


http-equiv="content-type">

Re: [CSS] background image disappears in Firefox when "float:" is used

On 2007-11-29, Tomasz Chmielewski 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).

Re: [CSS] background image disappears in Firefox when "float:" isused

Ben C schrieb:

(...)

>> 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).

Indeed, I needed "overflow: hidden" - thanks a lot.



--
Tomasz Chmielewski
http://wpkg.org

Re: background image disappears in Firefox when "float:" is used

On 29 nov, 12:44, Tomasz Chmielewski
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.pn=
g


[snipped]

>