SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Wizard silver trophy Karl's Avatar
    Join Date
    Jul 1999
    Location
    Derbyshire, UK
    Posts
    4,411
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Odd Firefox Issue with CSS

    I've got a problem with Firefox and two nested DIVs, now this didn't occur with Mozilla a few months back, and doesn't happen with IE or Opera, the DIVs are as follows:

    HTML Code:
    <div id="container">
     <div id="content">
     </div>
    </div>
    My #container has a BG image in it, the #content does not, but of course it has lots of text etc. etc. What is happening is that once #content gets past a certain height, #container is not growing with it, so I am left with no BG image from #container displaying past a certain point in the page, just the normal background of the page, with the conent of #content displaying over it - but without the BG colour for #content (white) displaying either!

    #container is inside the <body> and that is all, not inside any other divs and the CSS is:

    #container
    {
    background-color: #f0f0f0;
    background-image: url(images/leftbg.gif);
    background-repeat: repeat-y;
    }

    I've tried setting height 100% to no-avail. - Also it doesn't want to be 100% really as there is a footer on the page.

    #content CSS is:

    #content
    {
    background-color: #ffffff;
    background-image: url(images/welcomebg.gif);
    background-repeat: repeat-x;
    border-right: solid 1px #B8BCC0;
    font-family: Verdana,Geneva,Arial,Helvetica,sans-serif;
    height: 100%;
    margin-left: 213px;
    padding: 0 5px;
    top: 105px;
    width: 472px;
    vertical-align: top;
    }

    and <body> CSS is:

    body
    {
    background: #e2e2e2;
    font-family: Verdana,Geneva,Arial,Helvetica,sans-serif;
    font-size: 1em;
    font-weight: 400;
    margin-bottom: 0px;
    margin-left: 0px;
    margin-right: 0px;
    margin-top: 0px;
    padding: 0px;
    }

    Any help is really really appreciated, as it's driving me mad right now.

    Thanks,
    Attached Images Attached Images
    Karl Austin :: Profile :: KDA Web Services Ltd.
    Business Web Hosting :: Managed Dedicated Hosting
    Call 0800 542 9764 today and ask how we can help your business grow.

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,276
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    I think we need to see the exact code you are using (or a link) as I can't work out whats going on from the above code

    You have set a height:100% and if firefox obeyed it then all you would get would be a 100% and no more. See my FAQ on 100% height for a full explanation. Suffice to say that you need min-height:100% for firefox and height:100% for ie but they need to kept separate as shown in the FAQ.

    However that doesn't seem to be the issue as firefox would need the html,body also set to 100% in order for it to use the 100% (or alternatively if the element was absolutely positioned then it would also take effect.)

    I think there must be some code missing as you have specified top:105px which means nothing unless a positioning system is in effect (such as relative or absolute but not static).

    So from the code above it would seem that the inner would extend and push the outer along with it.

    If you can't post the whole code then make a short demo that exhibits the problem and post all the whole code for that instead.

    Paul

  3. #3
    SitePoint Wizard silver trophy Karl's Avatar
    Join Date
    Jul 1999
    Location
    Derbyshire, UK
    Posts
    4,411
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Righto, I've actually found the problem. The backgrounds for #container and #content were only being drawn down to the last item of text on the page, that wasn't contained inside another DIV - I have some divs with float: left set on them at the bottom of the #content DIV. Now if I add a sometext after the last floating DIV, it draws the backgrounds for #container and #content.
    Karl Austin :: Profile :: KDA Web Services Ltd.
    Business Web Hosting :: Managed Dedicated Hosting
    Call 0800 542 9764 today and ask how we can help your business grow.

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,276
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Now if I add a sometext after the last floating DIV, it draws the backgrounds for #container and #content.
    Floats are basically removed from the flow so backgrounds and borders will not follow a float automatically. You either need to follow the float with content (as you found out) or explicitly clear the float with a clearer div before the closing div of the parent. (See my FAQ on floats for more info)

    Code:
    .clearer {
    height:1px;
    overflow:hidden;
    clear:both;
    margin-top:-1px;
    }
    Code:
    <div id="parentdiv">
    <div>floated stuff</div>
    etc........
     
    <div class="clearer"></div>
    </div><!-- end parent div -->
    Paul


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •