Not signed in (Sign In)

SkillShare - A place to discuss Web Standards and Web Design topics

Categories

Vanilla 1.1.9 is a product of Lussumo. More Information: Documentation, Community Support.

  1.  permalink
    Hi.
    I am new to this forum. But i have read some articles which has been already published relating to my problems, and i tried , nothing worked. I have created horizontal navigation bar then I used Jquery for subnavigation , It works absolutely fine with IE7, firefox, even with google chrome. but it doesn't work on IE6 . here is my code:
    For html:
    <div id="nav"><div class="inner">
    <ul>
    <li><a href="index.html?phpMyAdmin=4594f30712f4fabaff6997416810f3f2" class="current"><span class="link">home</span></a>
    <ul>
    <li><a href="?phpMyAdmin=4594f30712f4fabaff6997416810f3f2">some other link</a></li>
    <li><a href="?phpMyAdmin=4594f30712f4fabaff6997416810f3f2"> link example</a></li>
    <li><a href="?phpMyAdmin=4594f30712f4fabaff6997416810f3f2">add anything</a></li>
    <li><a href="?phpMyAdmin=4594f30712f4fabaff6997416810f3f2">this will hopefully work</a></li>
    </ul>
    </li>
    <li><a href="about.html?phpMyAdmin=4594f30712f4fabaff6997416810f3f2"><span class="link">about</span></a></li>
    <li><a href="portfolio.html?phpMyAdmin=4594f30712f4fabaff6997416810f3f2"><span class="link">portfolio</span></a></li>
    <li><a href="blog.html?phpMyAdmin=4594f30712f4fabaff6997416810f3f2"><span class="link">Services</span></a>
    <ul>
    <li><a href="?phpMyAdmin=4594f30712f4fabaff6997416810f3f2">Building</a></li>
    <li><a href="?phpMyAdmin=4594f30712f4fabaff6997416810f3f2">Roofing</a></li>
    <li><a href="?phpMyAdmin=4594f30712f4fabaff6997416810f3f2">Commercial</a></li>
    </ul>
    </li>
    <li><a href="contact.html?phpMyAdmin=4594f30712f4fabaff6997416810f3f2"><span class="link">contact</span></a></li>
    </ul>
    </div></div>
    FOr css:
    /* === Nav === */
    #nav{
    background:url(images/navbg-repeat.jpg) repeat-x top;
    height:56px;
    width:100%;
    margin:2px 0;
    position:relative;z-index:999;
    }
    #nav .inner{
    width:100%;z-index:999;
    height:56px;
    background:url(images/navbg-middle.jpg) top center no-repeat;
    }
    #nav ul {
    font-size:18px;
    padding: 5px 0 0 30px;
    margin: 7px 0;
    list-style: none;
    float: left;
    text-shadow:1px 1px white;
    z-index:999;
    }
    #nav ul li{
    display:inline;
    float:left;
    z-index:100;
    }
    #nav ul li a:link, #nav ul li a:visited{
    display:inline;
    color:#525252;
    display:block;
    text-decoration:none;
    height:44px;
    }
    #nav ul li a:hover{
    display:inline;
    color:#000;
    background:url(images/bgright.jpg) no-repeat top right ;
    display:block;
    text-decoration:none;
    height:44px;
    }
    #nav ul li a.current{
    background:url(images/bgright.jpg) no-repeat top right ;
    height:44px;
    }
    #nav ul li a.active{
    background:url(images/bgright.jpg) no-repeat top right ;
    height:44px;
    }
    #nav ul li a.current span.link,#nav ul li a.active span.link, #nav ul li a:hover span.link {
    background: url(images/bgleft.jpg) no-repeat top left;
    }
    #nav ul li a span.link {
    margin: 0 18px 0 0px;
    padding: 12px 8px 14px 18px;
    position: relative; /*To fix IE6 problem (not displaying)*/
    float:left;
    cursor:pointer;
    }
    /* === Dropdown Nav === */
    #nav ul ul {
    position:absolute;
    display:none;
    top:37px;
    z-index:9999;
    background:#d0d2d3;
    padding:5px;
    border:1px solid #a2a2a2;
    width:170px;
    }
    ul#nav ul ul li{
    background:none;
    padding:0;
    margin:0;
    z-index:999;
    }
    #nav ul li ul li{
    background:none;
    border-top:1px solid #fff;
    border-bottom:1px solid #e4e4e4;
    z-index:999;
    padding:0;margin:0
    }
    #nav ul li ul a:link, #nav ul li ul a:visited{
    display:block;
    padding:10px 0 8px 10px;
    width:160px;
    font-size:12px;
    color:#333;
    text-decoration:none;
    font-weight:normal;
    background:#fff;
    float:left;
    margin:0;z-index:999;
    height:16px;
    }
    #nav ul li ul a:hover{
    display:block;
    width:160px;
    text-decoration:underline;
    font-weight:normal;
    font-size:12px;
    float:left;z-index:999;
    background:url(images/nav-submenu.jpg) repeat-x bottom #fff;
    }

    #nav ul ul ul{
    top:auto;z-index:999;
    }

    #nav ul li ul ul {
    left:146px;
    margin:0px 0 0 10px;
    z-index:9999;
    }
    #nav ul li{
    position:relative;
    }

    in the IE6 the main nav bar is not showing as horizontal , it breaks the link and is showing as drop down menu. Can anyone help? It is not on the web that i can show you. But if anyone likes to help please email me I can send u the screenshot. thanks
    • CommentAuthorLeo Templin
    • CommentTimeMar 16th 2010 edited
     permalink
    Hello Volcanocave, right off the bat I can tell you need to change the following styles for the links to this, not that I added the standard a tag to the selectors, made the display:block; declaration come before the display:inline-block; which is an IE-only display that works for basically exactly this, other browsers will ignore it.

    #nav ul li a, #nav ul li a:link, #nav ul li a:visited{
    display:block;
    display:inline-block;
    color:#525252;
    text-decoration:none;
    height:44px;
    }

    Not sure if this is going to fix all you're issues as it's hard for me to understand what other problems you might be having.

    Also, if you're trying to get IE6 performance you should make your selectors more specific, the actually work from right to left so when you say:
    #nav ul li a
    The browser grabs all the a tags in the page then checks if its in a li tag, then checks for ul and then finally the #nav, not very fast in IE6 on the old kind of machine that tends to sport it.
  2.  permalink
    HI, thanks for the reply. It works fine to display horizontal, now there is another issue raised, now my sub nav moves to far left . I wish i can send the files so u can look at it. can u tell me what should I do do fix the sub menu to work in right place?
  3.  permalink
    and I have to tell u that this sub navigation I created with javascript (jquery) but it works on firefox perfect.
  4.  permalink
    Is there anyway you can post your document plus styles in here or a link, I can't repro the error otherwise. Also, don't forget IE6 is used by around 11% of users these days, I would concentrate on making your site usable for IE6 rather than beautiful, you're probably doing a lot of work for an extremely small demographic.
    More info here: Letting IE6 Die With Dignity.
Add your comments
    Username Password
  • Format comments as (Help)