#1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2004
    Posts
    272
    Rep Power
    0

    Suckerfish menu and IE?


    Hi,



    q1)I can't move the menu to the right without problems as i set a margin on #headlinks2 and the links get cluttered?

    Code:
    #headlinks2 {
    height:25px;
    }
    
    #headlinks2 a {
    color:green;
    
    display: block;
    text-decoration:none;
    width: 100px;
    font-size:13pt;
    padding-right:5px;
    //margin-left:205px;
    }
    
    #headlinks2 a:hover {
    color: white;
    
    
    }
    
    #headlinks2, #headlinks2 ul {
    padding: 0;
    margin: 0;
    list-style: none;
    }
    
    #headlinks2 li {
    float: left;
    width: 100px;
    }
    
    #headlinks2 li ul {
    position: absolute;
    width: 100px;
    left: -999em;
    }
    
    #headlinks2 li:hover ul {
    left: auto;
    
    }
    
    #headlinks2 li:hover ul, #headlinks2 li.sfhover ul {
    left: auto;
    
    }
    </style>
    <script type="text/javascript">
    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>
    
    //html
    
    <div id="headlinks2">
    
    
    <li><a href="#">Percoidei</a>
    <ul>
    <li><a href="#">Remoras</a></li>
    <li><a href="#">Tilefishes</a></li>
    <li><a href="#">Bluefishes</a></li>
    
    </ul>
    </li>
    
    <li><a href="#">Anabant</a>
    <ul>
    <li><a href="#">Climbing perches</a></li>
    <li><a href="#">Labyrinthfishes</a></li>
    <li><a href="#">mex</a></li>
    
    </ul>
    </li>
    
    <li><a href="#">Percoidei</a>
    <ul>
    <li><a href="#">Remoras</a></li>
    <li><a href="#">Tilefishes</a></li>
    <li><a href="#">Bluefishes</a></li>
    
    </ul>
    </li>
    <li><a href="#">Anabant</a>
    <ul>
    <li><a href="#">Climbing perches</a></li>
    <li><a href="#">Labyrinthfishes</a></li>
    <li><a href="#">mex</a></li>
    
    </ul>
    </li>
    
    <li><a href="#">Percoidei</a>
    <ul>
    <li><a href="#">Remoras</a></li>
    <li><a href="#">Tilefishes</a></li>
    <li><a href="#">Bluefishes</a></li>
    
    </ul>
    </li>
    <!-- etc. -->
    
    
    
    </div>
  2. #2
  3. Permanently Banned
    Devshed Specialist (4000 - 4499 posts)

    Join Date
    Jun 2006
    Location
    In a whale
    Posts
    4,127
    Rep Power
    0
    You cannot rely on JavaScript being available. Period.
    Why are you using positioning in that way? From what I see a display: none; could replace "left: -999em;"
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2004
    Posts
    272
    Rep Power
    0
    hi,

    It is a drop down suckerfish menu so it needs to display the list out of view.

    That is not what i really asked though.
  6. #4
  7. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,124
    Rep Power
    4309
    "//" is not a comment indicator in CSS -- only "/* */" is.

    What doctype are you using?

    Why isn't there a <ul> start tag right after the <div id="headlinks2"> start tag?
    Spreading knowledge, one newbie at a time.

    Learn CSS. | PHP includes | HTML Validator | CSS validator

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  8. #5
  9. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2004
    Posts
    272
    Rep Power
    0
    hi,

    I know about the // for comments fails in IE and have changed them. I added the <ul> tag.


    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

    How do i move the thing across?
  10. #6
  11. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2004
    Posts
    272
    Rep Power
    0
    I still can't move the menu across with all the links in the same place. A margin tag fails to solve this in all hover tags.
  12. #7
  13. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,124
    Rep Power
    4309
    You need to set a margin on #headlinks2, but if you do it in the first rule as you show it, the second rule will overrule it because it comes later.

    You should be aware that text/html should not be used with XHTML 1.1; use application/xhtml+xml instead or switch to XHTML 1.0 Strict. IE (as of IE7) doesn't support application/xhtml+xml. Simply changing the <meta> element does not work. This needs to be sent in the actual HTTP Response Header.
    Sending XHTML as text/html Considered Harmful
    Serving up XHTML with the correct MIME type
    http://www.w3.org/2003/01/xhtml-mimetype/
    http://www.xml.com/pub/a/2003/03/19/dive-into-xml.html
    http://www.w3.org/TR/xhtml-media-types/#summary
    Content-Typing XHTML
    http://www.dynamicsitesolutions.com/demos/test.xhtml
    Spreading knowledge, one newbie at a time.

    Learn CSS. | PHP includes | HTML Validator | CSS validator

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).

IMN logo majestic logo threadwatch logo seochat tools logo