CSS Dropdown Not Working in IE

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

Which one? There are at least 4.

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.

For starters:

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

Missing opening <body> tag

Missing <title> tags

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

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. :slight_smile:

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.

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

Thanks

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.


<!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>

Shoot it douse not work in my doctype :frowning:

If their anything else that will work with my doctype?

Thanks