SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  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 My buttons look messed up in IE6

    Please help, this is how my site renders in IE6: http://www.designbits.de

    Crazy huh?

    Most other browsers are fine.

    How can I fix this?

    Thanks for any help!

  2. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    It's a bug in IE6 though can't remember the details.

    A fix (along with another bug you are running into) is to add these lines i
    Code:
    #nav li{display:inline;width:100px;}
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  3. #3
    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 Pixelateur View Post
    ...
    How can I fix this?
    ...
    IE6 stretches the floated li's to 100% width of ul, with the excuse the links are block displayed. (The content should do the stretching, not the display setting itself.)

    Just float the links and they will shrink.

    Then you will get the Floated Double Margin bug, fixed by setting display inline on the floated links (which does not harm as floats are mandatory displayed block).

    Code:
    /* =nav
    ================================================ */
    #nav {position: absolute; bottom: -1px; right: 0; list-style: none;}
    #nav li {float: left; height: 30px; background: url(/images/bg-nav-right-off.png) top right no-repeat; margin-left: 10px; border-bottom: 1px solid #a7c0e2; display: inline; /* IE6 fix */}
    #nav a {float:left; display:inline; height: 30px; font-family: "Helvetica Neue", Arial, sans-serif; font-weight: bold; line-height: 30px; color: #6691cc; text-decoration: none; text-transform: uppercase; letter-spacing: 1px;
    	background: url(/images/bg-nav-left-off.png) top left no-repeat; padding: 0 11px 0 15px; margin-right: 4px;}
    #nav a:hover {color: #fff;}
    #nav li#current {background-image: url(/images/bg-nav-right-on.png); border-bottom: 1px solid #6691cc;}
    #nav li#current a {color: #fff; background-image: url(/images/bg-nav-left-on.png);}
    Off Topic:

    I saw your thread yesterday, but the site was taken off line?

    (And as always; completely my taste. Regards to your "visual" designer. )
    Happy ADD/ADHD with Asperger's

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

    Works like a charme (as always). Thanks a lot for your help.

    I'm glad you also like the design of the site :-)


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
  •