Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > HTML > [CSS] background image disappears in Firefox when "float:" is used

Reply
Thread Tools

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

 
 
Tomasz Chmielewski
Guest
Posts: n/a
 
      11-29-2007
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).


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta content="text/html; charset=ISO-8859-1"
http-equiv="content-type">
<title>sometitle</title>
<style type="text/css">
#wrapper {
clear: both;
width:100%;
background-image: url(sub2_bg.png);
background-repeat: repeat-y;

}

#left_column {
width:607px;
float:left;
}

#right_column {
width:349px;
float:left;
}


..padding {
padding-left: 40px;
text-align:left;
}

</style>
</head>

<body>
<div id="wrapper">

<div id="left_column">
<div class="padding">
left column
</div>
</div>

<div id="right_column">
<div class="padding">
right column
</div>
</div>

</div>

</body>
</html>




--
Tomasz Chmielewski
http://wpkg.org
 
Reply With Quote
 
 
 
 
Ben C
Guest
Posts: n/a
 
      11-29-2007
On 2007-11-29, Tomasz Chmielewski <(E-Mail Removed)> 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).
 
Reply With Quote
 
 
 
 
Tomasz Chmielewski
Guest
Posts: n/a
 
      11-30-2007
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
 
Reply With Quote
 
GTalbot
Guest
Posts: n/a
 
      11-30-2007
On 29 nov, 12:44, Tomasz Chmielewski <(E-Mail Removed)>
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



[snipped]

> <style type="text/css">
> #wrapper {
> clear: both;
> width:100%;
> background-image: url(sub2_bg.png);
> background-repeat: repeat-y;
>
> }


[snipped]

> --
> Tomasz Chmielewskihttp://wpkg.org



Tomasz,

Ben C is right: just get rid of the width: 100% on the div#wrapper:
width: 100% is an useless and pointless declaration in your
stylesheet.

Gérard
 
Reply With Quote
 
Tomasz Chmielewski
Guest
Posts: n/a
 
      12-03-2007
GTalbot schrieb:
> On 29 nov, 12:44, Tomasz Chmielewski <(E-Mail Removed)>
> 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

>
>
> [snipped]
>
>> <style type="text/css">
>> #wrapper {
>> clear: both;
>> width:100%;
>> background-image: url(sub2_bg.png);
>> background-repeat: repeat-y;
>>
>> }

>
> [snipped]
>
>> --
>> Tomasz Chmielewski http://wpkg.org

>
>
> Tomasz,
>
> Ben C is right: just get rid of the width: 100% on the div#wrapper:
> width: 100% is an useless and pointless declaration in your
> stylesheet.


It's not useless - it is a workaround for a IE6 bug - without it, IE6
won't show the background image.



--
Tomasz Chmielewski
http://wpkg.org
 
Reply With Quote
 
Izdelava spletnih strani Izdelava spletnih strani is offline
Junior Member
Join Date: Jan 2010
Posts: 1
 
      01-05-2010
Tomasz is right. The height property has to be set in order for IE6 to show image.

I had dissapering text problem in IE6 when floating divs, but i fixed it by setting my container to height:1%
 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
DIV background-repeat background-image? For shadow effect jc ASP .Net 3 03-19-2008 04:19 PM
DIV background-repeat background-image for shadowing effect jc HTML 1 03-19-2008 02:16 PM
Background transparent when 'background' is used JWL HTML 4 09-26-2006 05:37 PM
changing a background image to a background colour? Dj Frenzy Javascript 3 02-10-2004 08:08 PM
Background color disappears when calling CSS =?Utf-8?B?TWFyaw==?= ASP .Net 6 01-06-2004 04:26 PM



Advertisments