Grow your CSS skills. Land your dream job.

Menu doesn’t position correctly in IE6 (problems fixed)

  • # March 4, 2009 at 10:09 pm

    Hi,

    This is the first time I’ve set up a menu using css sprites. It works great in FireFox and in Safari. But wouldn’t you know it, it doesn’t look right in IE6. Not sure how it looks in 7 or 8.

    The first menu button gets kicked over 50 or 60 pixels. I’ve spent many hours now picking apart the code down to the bare bones and it’s still getting kicked over.

    Is there some sort of IE hack needed for this to work?

    Thanks.

    Html Code:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
    <html xmlns="http://www.w3.org/1999/xhtml"&gt;
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Untitled Document</title>
    <link href="newnewTrashStyle.css" rel="stylesheet" type="text/css" />
    </head>

    <body>
    <div id="pageWrap">

    <div id="header">Content for id "header" Goes Here</div>

    <div id="mainNav">

    <ul id="menu">

    <li>
    <a class="WebSolutions" href="websolutions.html">webSolutions</a> </li>
    <li>
    <a class="capabilities" href="prepress.html">capab</a> </li>
    <li>
    <a class="FtpSite" href="ftpsite.html">ftp</a> </li>
    <li>
    <a class="Contact" href="contact.html">contact</a> </li>

    </ul>

    </div>
    </div>
    </body>
    </html>

    CSS:

    @charset "UTF-8";
    div#pageWrap {
    width: 1000px;
    }
    div#header {
    background-color: #CCFFCC;
    height: 100px;
    width: 1000px;
    }
    div#mainNav {
    height: 66px;
    width: 1000px;
    padding: 0px;
    background-color: #434E55;
    }

    ul#menu {
    list-style-image:none;
    list-style-position:outside;
    list-style-type:none;
    padding: 0px;
    margin-top: 0px;
    overflow: hidden;
    }

    ul#menu li {
    display:inline;
    }

    ul#menu li a {
    display:block;
    float:left;
    height:66px;
    text-indent:-9999px;/* this is used to shove the list text off of the screen */

    }

    ul#menu li a.WebSolutions {
    width:127px;
    background-attachment: scroll;
    background-color: #CCFF99;
    background-repeat: no-repeat;
    background-position: 0px 0px;
    }
    ul#menu li a.capabilities {
    width:126px;
    background-attachment: scroll;
    background-color: #CCFFFF;
    background-repeat: no-repeat;
    background-position: 0px 0px;
    }

    ul#menu li a.FtpSite {
    width:126px;
    background-attachment: scroll;
    background-color: #CCFF99;
    background-repeat: no-repeat;
    background-position: 0px 0px;
    }
    ul#menu li a.Contact {
    width:128px;
    background-attachment: scroll;
    background-color: #CCFFFF;
    background-repeat: no-repeat;
    background-position: 0px 0px;
    }

    ul#menu li a.WebSolutions:hover, ul#menu li a.WebSolutions:active,
    ul#menu li a.capabilities:hover, ul#menu li a.capabilities:active,
    ul#menu li a.FtpSite:hover, ul#menu li a.FtpSite:active,
    ul#menu li a.Contact:hover, ul#menu li a.Contact:active {
    background-position:0px -66px;
    }
    body#webSolutions ul#menu li a.webSolutions,
    body#capab ul#menu li a.capab,
    body#ftp ul#menu li a.ftp,
    body#contact ul#menu li a.contact, {
    background-position:0px -66px;
    }

    Rob
    # March 5, 2009 at 11:26 am

    Live link would be much more helpful please :)

    # March 5, 2009 at 2:56 pm

    I think because your menu’s made from a <ul>, IE’s applying a default margin to it. Set all the margins to zero (right now you just have margin-top: 0):

    Code:
    ul#menu {
    margin: 0;
    }

    That should do it.

    Also, in your sample code you have the styles for ul#menu, ul#menu li, and ul#menu li a listed twice – don’t know if that’s how your real code is or you just accidentally pasted it here twice.

    # March 5, 2009 at 9:04 pm

    That was it… Setting the left margin to 0 took care of my problem.

    Thanks!!! :D

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".