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

Discussion in 'HTML' started by Tomasz Chmielewski, Nov 29, 2007.

  1. 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
     
    Tomasz Chmielewski, Nov 29, 2007
    #1
    1. Advertising

  2. Tomasz Chmielewski

    Ben C Guest

    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).
     
    Ben C, Nov 29, 2007
    #2
    1. Advertising

  3. 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
     
    Tomasz Chmielewski, Nov 30, 2007
    #3
  4. Tomasz Chmielewski

    GTalbot Guest

    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.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
     
    GTalbot, Nov 30, 2007
    #4
  5. Re: background image disappears in Firefox when "float:" is used

    GTalbot schrieb:
    > 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.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
     
    Tomasz Chmielewski, Dec 3, 2007
    #5
  6. Tomasz Chmielewski

    Izdelava spletnih strani

    Joined:
    Jan 5, 2010
    Messages:
    1
    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%
     
    Izdelava spletnih strani, Jan 5, 2010
    #6
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. =?Utf-8?B?TWFyaw==?=

    Background color disappears when calling CSS

    =?Utf-8?B?TWFyaw==?=, Jan 6, 2004, in forum: ASP .Net
    Replies:
    6
    Views:
    1,810
    =?Utf-8?B?TWFyaw==?=
    Jan 6, 2004
  2. bd
    Replies:
    0
    Views:
    652
  3. JWL
    Replies:
    4
    Views:
    596
    Michael Winter
    Sep 26, 2006
  4. jollyroger
    Replies:
    6
    Views:
    944
    dorayme
    Feb 8, 2007
  5. Carsten Fuchs
    Replies:
    45
    Views:
    1,612
    James Kanze
    Oct 8, 2009
Loading...

Share This Page