SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Addict
    Join Date
    Aug 2006
    Posts
    375
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Background image not repeating as far down as it should (Firefox)

    This is hopefully a quick one - although it only affects Firefox for PCs rather than IE for a change. (It seems fine in Firefox on Macs.)

    Basically the page is here :

    http://www.handprintdvd.co.uk/webdes...s/index1.shtml

    I've created a three column background for the contentWrapper DIV :

    #contentWrapper {
    background-image:url(threecolumns.gif);
    background-repeat:repeat-y;
    }

    But as you can see in Firefox on PC's, it only extends down as far as the Tracking heading on the left, rather than all the way down to the footer.

    Also, if you look at in IE(6), the headings in the navigation column (Vehicle Leasing, Fleet Management etc) have a white background, rather than the same light blue of the column - the CSS I have for those headers is :

    #productmenu h1 {
    color:#4C5972;
    background-color:#EAEFF5;
    }

    Any ideas?

    Cheers.

  2. #2
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I see you "fixed" the background problem with a float clearing div - overflow:hidden on the #contentWrapper would have worked too.

    The h1's need HasLayout triggered for IE - width:100% will work here.

  3. #3
    SitePoint Addict
    Join Date
    Aug 2006
    Posts
    375
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Cheers - that float <div> was always there as a fix, but doesn't fix it in Firefox v1 - which I forgot I was still running on my old PC. As I can't imagine there are too many people on v1, that's good enough for me!

    And the width:100&#37; worked, so cheers for that. I first thought forcing the background colour would do it, but no joy, then tried display:block; but no joy there either.

    Still - all looking as it should now, thanks.

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Cheers - that float <div> was always there as a fix, but doesn't fix it in Firefox v1
    That's because old versions of firefox need a height on the clearer because of a margin collapse bug.

    Add a height if you want it to clear.
    Code:
    #outerWrapper #contentWrapper .clearFloat {
      clear: both;
      display: block;
    height:1px;
    overflow:hidden;
    margin-top:-1px;
    
    }
    However that will add 1px of space in modern Firefox.

    Read the faq on floats as this is explained along with some better clearing techniques

  5. #5
    SitePoint Addict
    Join Date
    Aug 2006
    Posts
    375
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    OK - thanks 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
  •