SitePoint Sponsor

User Tag List

Results 1 to 12 of 12
  1. #1
    SitePoint Evangelist Pixelateur's Avatar
    Join Date
    Feb 2006
    Location
    Hamburg, Germany
    Posts
    593
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Gaps between menu items in IE6

    Hello,

    Can someone tell me why there's a gap between all the list items in my menu bar? This is the link.

    And this is the CSS:

    Code:
    #nav a {display: block; font-size: 1.3em; color: #333; text-decoration: none; text-indent: 2em; padding: 1.2em 0; 
    	border-top: 1px solid #ffc; border-bottom: 1px solid #f93;}
    Thanks for any feedback...

  2. #2
    Design Your Site Team bronze trophy Erik J's Avatar
    Join Date
    May 2007
    Location
    Countryside, Sweden
    Posts
    3,407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    For the "#header li" you have a margin-right:15px.
    Happy ADD/ADHD with Asperger's

  3. #3
    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)
    Common IE6 problem - float the <li>s :
    Code:
    #nav li {float: left; width: 100%;}

  4. #4
    Design Your Site Team bronze trophy Erik J's Avatar
    Join Date
    May 2007
    Location
    Countryside, Sweden
    Posts
    3,407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by erik.j View Post
    For the "#header li" you have a margin-right:15px.
    What on earth was I thinking? The issue was in #nav, not #header!

    As a quick fix you could try: "#nav li {display:inline;}", but Centauri's solution is much better.
    Happy ADD/ADHD with Asperger's

  5. #5
    SitePoint Evangelist Pixelateur's Avatar
    Join Date
    Feb 2006
    Location
    Hamburg, Germany
    Posts
    593
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thumbs up

    Quote Originally Posted by Centauri View Post
    Common IE6 problem - float the <li>s :
    Code:
    #nav li {float: left; width: 100%;}
    Works like a charme, thanks a lot :-)

  6. #6
    SitePoint Evangelist Pixelateur's Avatar
    Join Date
    Feb 2006
    Location
    Hamburg, Germany
    Posts
    593
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thumbs up

    Quote Originally Posted by erik.j View Post
    What on earth was I thinking? The issue was in #nav, not #header!

    As a quick fix you could try: "#nav li {display:inline;}", but Centauri's solution is much better.
    I know, it's a little confusing because the stuff in the header refers to the three tabs in the upper right corner. Thanks for helping though...

  7. #7
    SitePoint Evangelist Pixelateur's Avatar
    Join Date
    Feb 2006
    Location
    Hamburg, Germany
    Posts
    593
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Oops, there seems to be another issue though. Why's there a white gap just beneath the black footer bar in Firefox and Safari?? Any pointers on that one?

  8. #8
    Design Your Site Team bronze trophy Erik J's Avatar
    Join Date
    May 2007
    Location
    Countryside, Sweden
    Posts
    3,407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Maybe "overflow:hidden" on the footer will shrink the gap under.
    Happy ADD/ADHD with Asperger's

  9. #9
    SitePoint Evangelist Pixelateur's Avatar
    Join Date
    Feb 2006
    Location
    Hamburg, Germany
    Posts
    593
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    No, it didn't :-(

  10. #10
    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)
    It is beng caused by the float clearing method on #wrapper
    Code:
    #wrapper:after {content: "."; display: block; height: 0; clear: both; visibility: hidden;}
    but not sure why. Personally, instead of that, I would just use overflow: hidden; in the #wrapper style.

  11. #11
    SitePoint Evangelist Pixelateur's Avatar
    Join Date
    Feb 2006
    Location
    Hamburg, Germany
    Posts
    593
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Centauri,

    It seems the "." in the #wrapper:after class made the footer appear higher tha n it actually was. Using the overflow: hidden; line works like a charme however. Thanks!!

  12. #12
    SitePoint Evangelist Pixelateur's Avatar
    Join Date
    Feb 2006
    Location
    Hamburg, Germany
    Posts
    593
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    By the way the new site can be seen here. Thanks again for helping!


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
  •