SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Addict
    Join Date
    Jul 2009
    Posts
    356
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS Dropdown not working in IE6 or IE7

    There should be two items that drop down when you hover over Products.

    I have used this code for a few other sites but never had this problem before.

    Any help as always is greatly appreciated.

    http://www.vismarkgroup.com/dev/tomboboutdoors2/

  2. #2
    SitePoint Guru
    Join Date
    Nov 2008
    Posts
    625
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    remove "left:-999em" and it will work fine in IE 6/7.

    Code:
    ul#nav li ul { 
    position: absolute; 
    width: 135px; 
    left: -999em;  /*remove this */
    background-color: #0C4000 }
    Vineet

  3. #3
    SitePoint Addict
    Join Date
    Jul 2009
    Posts
    356
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by vinpkl View Post
    remove "left:-999em" and it will work fine in IE 6/7.

    Code:
    ul#nav li ul { 
    position: absolute; 
    width: 135px; 
    left: -999em;  /*remove this */
    background-color: #0C4000 }
    Vineet
    hmm i tried doing that but now the dropdown is permanently "dropped". Even when you aren't hovering.

  4. #4
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Hi,
    You do not have a doctype on your page and IE is in quirks mode.

    Also, a better method is to hide the the sub ul with a negative left margin instead of left position. Set the left position at zero at all times then bring it back into view with margin-left:0 on hover.

    Set the relative position on the "li" after that so it becomes the containing block for the sub ul.

    (Scroll all the way through the codebox)
    Code:
    ul#nav {
        z-index: 50;
        margin: 0 0 1px 0;
        padding: 0;
        list-style: none;
        /*position: relative;*/
        width: 880px;
        height: 38px;
        line-height: 38px;
        clear: both;
        background: green url(../images/menubar.png) no-repeat;
        padding-left: 2px
    }
    ul#nav ul {
        padding: 0;
        margin: 0;
        list-style: none;
        background: #FFF;
        line-height: 20px;
    }
    ul#nav li {
        float: left;
        /*display: block;*/
        position: relative;
        padding: 0;
    }
    ul#nav li a {
        padding: 0 16px;
        display: block;
        font: 16px/39px georgia, times, serif;
        text-decoration: none;
        color: #fff;
    }
    ul#nav li a:hover {
        color: #fdc040;
        background-color: #0C4000;
    }
    ul#nav li ul {
        position: absolute;
        width: 135px;
        left:0;
        margin-left: -999em;
        background-color: #0C4000
    }
    ul#nav li li {
        margin: 0;
        padding: 0;
        float: left;
    }
    ul#nav li li  a {
        background-image: none;
        padding: 6px;
        border-bottom: 1px solid #d2d2d2;
        width: 123px;
        display: block;
        font-weight: normal;
        color: #ffffff;
        font: normal 14px georgia, times, Helvetica;
        text-decoration: none;
    }
    ul#nav li li  a:hover {
        color: #fdc040;
        background-color: #0e7300;
    }
    ul#nav li:hover ul {
        margin-left:0;
        cursor: pointer;
    }
    ul#nav li:hover ul, #nav li.sfhover ul {
        margin-left: 0;
    }

  5. #5
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    As far as the doctype I mentioned you will do just fine with HTML 4.01 Strict, It looks like you also need to get the sfhover script in place for IE6.

    Here are both of those changes, move the script to it's own file and link to it via CC for IE6.

    HTML Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    
    <title>TomBob Outdoors LLC. - Environmentally Friendly, Lead-Free Products for the Serious Outdoorsman</title>
    
    <!--[if IE 6]>
    <script type="text/javascript">// the Suckerfish script inserts class=sfhover on all li inside id=nav on mouseover
    sfHover = function() {
        var sfEls = document.getElementById("nav").getElementsByTagName("LI");
        for (var i=0; i<sfEls.length; i++) {
            sfEls[i].onmouseover=function() {
                this.className+=" sfhover";
            }
            sfEls[i].onmouseout=function() {
                this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
            }
        }
    }
    if (window.attachEvent) window.attachEvent("onload", sfHover);
    </script>
    <![endif]-->
    
    <style type="text/css">
    body {
        background-color: #895522;
        background-image: url(images/logs.png);
        background-repeat: repeat-x;
    }
    #pcm{display:none;}
     
    </style>
    
    <link href="tombob.css" rel="stylesheet" type="text/css">
    <!-- InstanceBeginEditable name="head" --><!-- InstanceEndEditable -->
    </head>
    You can also get rid of that .navcontainer div since it is not doing anything.
    HTML Code:
          <td width="884" height="38" background="images/TomBob-HomePageConcept_15.png">   
            <ul id="nav"><!--@begin nav -->
              <li><a id="home" href="index.php"><span>Home</span></a>
              </li>
              <li><a id="about" href="about.php"><span>About</span></a>
              </li>
              <li><a id="products" href="products.php"><span>Products</span></a>
                <ul>
                  <li><a href="fishing-products.php"><span>Fishing Products</span></a></li>
                  <li><a href="hunting-products.php"><span>Hunting Products</span></a></li>         
                </ul>
              </li>
              <li><a id="news" href="news.php"><span>News</span></a>
              </li>
              <li><a id="links" href="links.php"><span>Links</span></a>
              </li>
              <li><a id="contact" href="contact.php"><span>Contact</span></a>
              </li>    
            </ul><!--@end nav-->
          </td>
    The css I posted above works fine with both IE6/7 along with those html adjustments.

  6. #6
    SitePoint Addict
    Join Date
    Jul 2009
    Posts
    356
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Rayzur, as always thank you so much.

    Was in meetings all day and have not yet had a chance to plug this in, but I will do so soon.

    Thank you again.

  7. #7
    SitePoint Addict
    Join Date
    Jul 2009
    Posts
    356
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Raymur!

    Now for some reason we are getting a little 10px gap below the header and above phone number field.

    My coworker is still using dreamweaver with tables and I am trying very hard to get him converted to css to avoid these types of issues

  8. #8
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,750
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    Probably just the whitespace left under images to allow for text nodes . Can't test since the college comptuers don't have firebug.
    Code:
     img{vertical-align:bottom;}
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  9. #9
    SitePoint Addict
    Join Date
    Jul 2009
    Posts
    356
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by RyanReese View Post
    Probably just the whitespace left under images to allow for text nodes . Can't test since the college comptuers don't have firebug.
    Code:
     img{vertical-align:bottom;}
    woot!

    Thanks Ryan!

  10. #10
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,750
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    You're welcome .
    Always looking for web design/development work.
    http://www.CodeFundamentals.com


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
  •