Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home › Forums › CSS › Menu doesn’t position correctly in IE6 (problems fixed)

  • This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • March 4, 2009 at 10:09 pm #24286
    rjfischstx
    Member

    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;
    }

    March 5, 2009 at 11:26 am #54713
    Rob MacKay
    Participant

    Live link would be much more helpful please :)

    March 5, 2009 at 9:04 pm #54743
    rjfischstx
    Member

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

    Thanks!!! :D

  • Author
    Posts
Viewing 3 posts - 1 through 3 (of 3 total)
  • The forum ‘CSS’ is closed to new topics and replies.