Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Jul 2009
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    IE compatibility issue *menu dropdowns help!!!

    hello fellow css developers!

    I've coded a lovely menu system that works well in chrome, safari,
    firefox, but NOT Internet Explorer.

    The idea is that you hover over the top menu item, and the sub-menu
    items are displayed.

    Sadly I just don't know what the issue is, plus being a relative newb,
    I don't know what I can do to make it all better...

    Below is code for an html page, if you were to save it to file as
    x.html you will be able to see the problem...

    Any help would be really REALLY appreciated! Im just tired of bashing
    my head into the computer monitor.

    thanks in advance!


    Code:
    <html>
    <head>
    <style type="text/css">
    .MenuBar {
       font-size:13px;
       font-family:Arial, Helvetica, sans-serif;
       background-image: url(../images/banner-bg.png);
       height: 35px;
    }
    
    p a {
       color: #000;
       text-decoration:underline!important;
    
    }
    a{
       color:#000;
       text-decoration:none;
       }
    p a:hover{   text-decoration: none!important;
    }
    
    ul#nav {
       list-style: none;
       padding: 0 0 0 2%;
       margin: 0;
       background-color: #666666;
    
    }
    
    
    ul#nav li a {
       display: block;
       font-weight: bold;
       padding: 2px 10px;
       
       background:#888;
       color:#ffffff;
    }
    
    ul#nav li a:hover{
       color:#000000;
       background:#f9f9f9;
       font-weight: bold;
       }
       
    ul#nav li {
       float: left;
       position: relative;
       text-align: left;
       margin-right:5px;
       border:1px solid #ccc;
    
    }
    
    ul#nav li.current a{
       background:#ddd;
       width: 100px
       }
    
    ul#nav li.current a:hover{
       background:#888;
       width: 100px
       }
    
    li ul {
       display: none;
       position: absolute;
       top: 0;
       left: 0;
       font-weight: normal;
       padding: 1px 0 18px;
       margin-left:-1px;
       height: 35px;
    }
    
    ul#nav li ul.sub li{
       border-width:0 1px 1px 1px!important;
       width: 170px
    }
    
    ul#nav li ul.sub li a{
       font-weight: normal!important;
       width: 170px   
    }
    li > ul {
       top: auto;
       left: auto;
    }
    
    li:hover ul, li.over ul {
       display: block;
    }
    </style>
    </head>
    <body>
    <li><a href="#">2415364747568tutrutrrth</a>
                
      <ul class="sub">
        <li><a href="#" title="">asdfasdfasdfasdf</a></li>
        <li><a href="#" title="">123412341234124</a></li>
        <li><a href="#" title="">asdfsadfasdfsdfer4534535345345345345</a></li>
        <li><a href="#" title="">xcvzbzbxcvnvn</a> </li>
      </ul>
             </li>
    </body>
    </html>

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,849
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    You need to have a complete DOCTYPE at the top of your document, for IE to operate in standard mode.
    Code:
    li:hover ul, li.over ul {
       display: block;
    }
    IE doesn't support :hover pseudo on any elements other than anchor. So you need to have a small javascript hack for this. Refer http://www.htmldog.com/articles/suckerfish/dropdowns/
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    Regular Coder
    Join Date
    Jul 2009
    Posts
    136
    Thanks
    0
    Thanked 7 Times in 7 Posts
    You should include a doctype declaration otherwise the browser may make the wrong assumptions.

    If I add this DOCTYPE:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">

    the menu starts working (sort of) in IE.

    As for it working in Firefox it doesn't for me. There is no way to move to the sub menu without it disappearing. The lists are wrong as you start with a LI without the UL around it.

    Maybe start again with this page about creating a drop down menu with CSS. Warning: that's my site so I'm biased but I think it covers how to do it VERY simply and leaves you ready to improve the look of the menu (which it needs!).


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •