CSS Dropdown Not Working in IE

**CSSIssue** · Apr 8, 2011 17:10

Hi,

My pure CSS dropdown menu is not working in Internet Explorer but works on every other browser. (FireFox Safari, Chrome.)

The menu: http://www.1tm.com/test/notworkinginie.html

Thanks for any help

**ralph.m** · Apr 8, 2011 17:41

Originally Posted by CSSIssue

not working in Internet Explorer

Which one? There are at least 4.

**CSSIssue** · Apr 8, 2011 17:49

Thanks for the reply ralph.m I would like it to work in all Internet Explorer versions but my current version is Internet Explorer 8 and it dont work.

**Rayzur** · Apr 8, 2011 20:27

For starters:

Incomplete doctype (missing referring url) throwing all versions of IE into Quirks Mode.

Missing opening <body> tag

Missing <title> tags

**CSSIssue** · Apr 8, 2011 21:01

Sorry this was just a test page I made showing you the CSS menu but it works just like it does when those tags are in their.

Thanks

**Rayzur** · Apr 8, 2011 21:29

You misunderstood me, I didn't say it would solve your problems.

Getting IE out of quirks mode it is the First Step towards fixing it. Until you do so you will be wasting your time or building another page that only works in quirks mode with bugs piling up left and right.

**CSSIssue** · Apr 8, 2011 21:43

Alright how do I fix it I want a normal doctype but I dont want to have to redo the entire site?

Thanks

**Rayzur** · Apr 8, 2011 22:36

Originally Posted by CSSIssue

Alright how do I fix it I want a normal doctype but I dont want to have to redo the entire site?

Thanks

We've been through that before. It's too late to stick a proper dtd on your current site as the whole thing is built on quirks mode.

I thought maybe this menu was something different you were doing, I was trying to catch you before you made the same mistake again.

**CSSIssue** · Apr 8, 2011 22:57

Could you get this menu to work in most versions of Internet Explorer I would pay you if you want to?

Thanks

**Rayzur** · Apr 8, 2011 23:41

Hi,

We offer help for free here in the forums. The problem is just as we have stated before, your page really needs to be rebuilt or you will continue to have problems with it.

I did get your menu working in IE7+ in this standalone example. I have it in standard mode though so it is doubtful that it would work if you plugged it into your site.

Code HTML4Strict:

<!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>Test Page</title>
 
<style type="text/css">
 
ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
/*===================*/
#nav {
    float: left;
    width: 100%;
    background: black url(blockdefault.gif) center center repeat-x;
}
#nav li {
    float: left;
    position: relative;
}
#nav li a {
    display: block;
    padding: 9px 14px;
    white-space: nowrap;
    font:bold 14px Arial;
    color: #FFF;
    background: black url(blockdefault.gif) center center repeat-x;
    text-decoration: none;
    border-right: 1px solid #FFF;
}
#nav li a:hover {
    text-decoration:underline;
}
#nav li a:hover .current,
#nav li .current {
    background: transparent url(blockactive.gif) center center repeat-x;
}
#nav li:hover a {
    background: transparent url(blockactive.gif) center center repeat-x;
    text-decoration: none;
}
 
/*===== Drop Down ======*/
#nav ul,
#nav ul.last {
    position: absolute;
    left:0;
    top:100%;
    margin-left: -999em;
    opacity: 0;
    text-align: left;
    background: url(foo) fixed;/*IE6/7 need a BG to hold the anchor open*/
}
#nav li li {
    float: none;
    display:block;
}
#nav li li a {
    padding: 7px 14px;
    position:relative;/*IE7 needs this*/
}
#nav li:hover ul,
#nav li:hover ul.last {
    margin-left: 0;
    opacity: 1;
    z-index: 10;
}
#nav li:hover ul.last {
    left: auto;
    right: 0;
}
#nav li:hover li a {
    background: #980E10;
}
#nav li:hover li a:hover {
    background: #CF1519;
}
 
</style>
 
</head>
<body>
 
<ul id="nav">
    <li><a class="current">Home</a></li>
    <li><a href="#">cPanel Hosting</a>
        <ul>
            <li><a href="cpanel_website_hosting.html">fluid width sublist</a></li>
            <li><a href="cpanel_virtual_private_server.html">fluid width sublist</a></li>
            <li><a href="cpanel_semi_dedicated_server.html">fluid width sublist</a></li>
        </ul>
    </li>
    <li><a href="#">cPanel Reseller</a>
        <ul>
            <li><a href="cpanel_reseller_hosting.html">cPanel Reseller Hosting</a></li>
            <li><a href="cpanel_master_reseller_hosting.html">cPanel Master Reseller Hosting</a></li>
            <li><a href="cpanel_alpha_reseller_hosting.html">cPanel Alpha Reseller Hosting</a></li>
        </ul>
    </li>
    <li><a href="#">Website Marketing</a>
        <ul>
            <li><a href="weekly_website_submission.html">Weekly Website Submission</a></li>
            <li><a href="worldwide_website_traffic.html">Worldwide Website Traffic</a></li>
            <li><a href="united_states_website_traffic.html">United States Website  Traffic</a></li>
            <li><a href="united_kingdom_website_traffic.html">United Kingdom Website Traffic</a></li>
        </ul>
    </li>
    <li><a href="#">Website Design</a>
        <ul class="last">
            <li><a href="professional_website_design.html">Professional Website Design</a></li>
            <li><a href="professional_website_backups.html">Professional Website Backups</a></li>
            <li><a href="professional_script_installation.html">Professional Script Installation</a></li>
        </ul>
    </li>
    <li><a href="#">SSL</a>
        <ul class="last">
            <li><a href="rapidssl_certificate.html">fluid width</a></li>
            <li><a href="comodo_essential_certificate.html">sublist</a></li>
            <li><a href="comodo_instant_certificate.html">fluid width sublist</a></li>
            <li><a href="geotrust_ev_certificate.html">fluid width sublist</a></li>
        </ul>
    </li>
</ul>
 
</body>
</html>

**CSSIssue** · Apr 9, 2011 00:01

Shoot it douse not work in my doctype

If their anything else that will work with my doctype?

Thanks

User Tag List

Thread: CSS Dropdown Not Working in IE

Thread Tools

Display

CSS Dropdown Not Working in IE

Tags for this Thread

Bookmarks

Bookmarks

Posting Permissions