Why won't my CSS drop-down menu work with IE?

[wienerdog]

I’m having trouble with getting this drop-down I got from the More with Eric Meyer book to work in IE, so I’m waiving the white flag. Any kind soul willing to look at my CSS code below and the temporary page I've set it up? I would be forever grateful.

Here’s where I’m at with it:

This is the HTML file I’m working on: http://wienergraphics.com/LRA/solutions_test.html

Here is my entire style sheet. Sorry it's so long. I thought I should include the whole thing so nothing it missed. The side menu navigation rules are the section in the code close to the bottom, and is labelled with a comment.

/* GENERAL
-------------------------------------------------------------------------*/
body {
margin: 0;
padding: 0;
background-color: #ffffff;
font: normal 12px Geneva, Verdana, Arial, sans-serif;
color: #666;
text-align: center;
behavior: url(css/csshover.htc); /* WinIE behavior call */
}

#header {
width: 695px;
height: 102px;
margin: 0px;
}

#content {
position: relative;
margin-top: 30px;
}

#container {
margin: 0 auto;
text-align: left;
width: 695px;
}

.indent {
padding: 10px;
}

.pop {
background-color: #212C56;
color: #fff;
text-align: left;
padding: 25px;
}

.pop_title {
font: bold 14px Verdana, Helvetica, Arial, sans-serif;
color: #C6C41E;
}


#cs_quote {
font-decoration: italic;
margin: 5px;
float: left;
}

.title3 {
font: bold 11px Verdana, Helvetica, Arial, sans-serif;
text-transform: uppercase;
}

.orange {
font: bold 11px Verdana, Helvetica, Arial, sans-serif;
color: #FB8510;
}

#hide
{visibility: hidden;}


#old-flash {
font: bold 14px Verdana, Helvetica, Arial, sans-serif;
color: #ffffff;
background-color: #C6C41E;
text-align: center;
}
/* HOME
-------------------------------------------------------------------------*/


#home-right {
float: right;
width: 218px;
text-align: left;
font-family: Arial, Verdana, Helvetica, sans-serif;
text-decoration: none;
color: #000000;
font-size: 12px;
}
#homeright1
{
width: 218px;
text-align: left;
font-family: Arial, Verdana, Helvetica, sans-serif;
text-decoration: none;
color: #000000;
font-size: 12px;
}

#homeright2
{
width: 218px;
text-align: left;
font-family: Arial, Verdana, Helvetica, sans-serif;
text-decoration: none;
color: #000000;
font-size: 12px;
font-weight: bold;
}
#homeright3
{
width: 218px;
text-align: left;
font-family: Arial Black, Verdana, Helvetica, sans-serif;
text-decoration: none;
color: #000000;
font-size: 12px;
}
#homeright4
{
width: 218px;
text-align: left;
font-family: Arial Black, Verdana, Helvetica, sans-serif;
text-decoration: none;
color: #000000;
font-size: 12px;
font-weight: bold;
}
#homeright5
{
width: 218px;
text-align: left;
font-family: Impact, Verdana, Helvetica, sans-serif;
text-decoration: none;
color: #000000;
font-size: 12px;
}
#homeright6
{
width: 218px;
text-align: left;
font-family: Impact, Verdana, Helvetica, sans-serif;
text-decoration: none;
color: #000000;
font-size: 12px;
font-weight: bold;
}
#homeright7
{
width: 218px;
text-align: left;
font-family: Trebuchet MS, Verdana, Helvetica, sans-serif;
text-decoration: none;
color: #000000;
font-size: 12px;
}
#homeright8
{
width: 218px;
text-align: left;
font-family: Trebuchet MS, Verdana, Helvetica, sans-serif;
text-decoration: none;
color: #000000;
font-size: 12px;
font-weight: bold;
}
#homeright9
{
width: 218px;
text-align: left;
font-family: Verdana, Helvetica, sans-serif;
text-decoration: none;
color: #000000;
font-size: 12px;
font-weight: bold;
}
#homeright10
{
width: 218px;
text-align: left;
font-family: Verdana, Helvetica, sans-serif;
text-decoration: none;
color: #000000;
font-size: 12px;
font-weight: bold;
}

#home-left {
margin: 0px 0px 0px 0px;
float: left;
width: 413px;
}

#home-flash1 {
margin: 0px 0px 0px 0px;
float: left;
width: 590px;
}

#home-flash2 {
margin: 0px 0px 0px 0px;
float: left;
}

#home-flash {
}

/* sub
-------------------------------------------------------------------------*/


#sub-right {
margin: 0px 0px 0px 545px;
width: 140px;
text-align: left;
}

#sub-right-industry {
margin: 17px;
font: bold 10px Verdana, Helvetica, Arial, sans-serif;
}

#sub-contain {
margin: 0px 0px 0px 0px;
float: left;
text-align: left;
width:510;
}


#sub-mid {
margin: 0px 0px 0px 172px;
width: 340px;
}


#sub-mid-right {
margin: 0px 0px 0px 172px;
width: 500px;
}


#sub-left {
margin: 0px 0px 0px 0px;
float: left;
width: 147px;
}


#sub-text {
font: 11px Verdana, Helvetica, Arial, sans-serif;
color: #000;
margin: 20px 10px 10px 10px;
}


#contact1 {
color: #000;
background-color: #fff;
padding: 15px;
border-style: solid;
border-width: 1px;
border-color: #333;
width: 300px;
}

.required {
color: #c00;
}


/* LINKS
-------------------------------------------------------------------------*/
a:link, a:active, a:visited {
color:#000000;
text-decoration:underline;
}
a:hover {
color:#000000;
text-decoration:none;
}

a.menu: a:link, a:active, a:visited {
color:#00255B;
text-decoration:none;
}
a.menu:hover {
color:#A0B529;
text-decoration:none;
}

a.utility-1:link, a.utility-1:active, a.utility-1:visited {
color:#666666;
text-decoration:none;
}
a.utility-1:hover {
color:#000;
text-decoration:none;
}

a.utility_2:link, a.utility_2:active, a.utility_2:visited {
color:#909090;
text-decoration:none;
}
a.utility_2:hover {
color:#00486D;
text-decoration:none;
}

a.utility_3:link, a.utility_3:active, a.utility_3:visited {
color:#666666;
text-decoration:underline;
}
a.utility_3:hover {
color:#000;
text-decoration:none;
}

a.utility_4:link, a.utility_4:active, a.utility_4:visited {
color:#1970A2;
text-decoration:underline;
}
a.utility_4:hover {
color:#666;
text-decoration:none;
}


a.utility_white:link, a.utility_white:active, a.utility_white:visited {
color:#fff;
text-decoration:none;
}
a.utility_white:hover {
color:#fff;
text-decoration:none;
}

a.footer-main:link, a.footer-main:active, a.footer-main:visited {
color:#909090;
text-decoration:none;
}
a.footer-main:hover {
color:#000;
text-decoration:none;
}


a.footer-privacy:link, a.footer-privacy:active, a.footer-privacy:visited {
color:#909090;
text-decoration:underline;
}
a.footer-privacy:hover {
color:#000;
text-decoration:none;
}


/* TEXT TREATMENTS
-------------------------------------------------------------------------*/
.blue_bold {
font: bold 11px Verdana, Helvetica, Arial, sans-serif;
color: #00255B;
}

.text-1 {
font: 11px Verdana, Helvetica, Arial, sans-serif;
color: #000;
margin: 0px 10px 0px;
}

.text-2 {
font: bold 11px Verdana, Helvetica, Arial, sans-serif;
font-style: italic;
color: #000;
margin: 0px;
}

.text-3 {
font: bold 11px Verdana, Helvetica, Arial, sans-serif;
color: #000;
margin: 0px;
}

.text-5 {
font: bold 12px Verdana, Helvetica, Arial, sans-serif;
color: #fff;
margin: 0px;
}

.home-news {
font: 11px Verdana, Helvetica, Arial, sans-serif;
color: #000;
margin: 0px 10px 0px;
}

.home-newsdate {
font: 11px Verdana, Helvetica, Arial, sans-serif;
color: #FB7C00;
margin: 0px 10px 0px;
}

.breadcrumb-nav {
font: 11px Verdana, Helvetica, Arial, sans-serif;
color: #666666;
}

.orange {
color: #FC7D00;
}

#footer {
font: 9px Arial, Helvetica, sans-serif;
color: #666;
}

/* FOOTER
-------------------------------------------------------------------------*/

#footer {
position: relative;
clear: both;
margin: 30px 3px 10px;
width: 689px;
height: 10px;
}

#footer-right {
margin: 0px 3px 0px 305px;
width: 370px;
text-align: right;
}

#footer-left {
margin: 0px 0px 0px 3px;
float: left;
width: 300px;
}

TD.leftnav
{
background: #FAF3CF;
font-family: Verdana, Arial, Helvetica, sans-serif;
text-decoration: none;
color: #000000;
font-size: 10px;
}
TD.black
{
background: #000000;
}
A.leftnav
{
text-decoration: none;
}
A.leftnav:visited
{
text-decoration: none;
}
A.leftnav:hover
{
text-decoration: none;
}

A.rightnav
{
font-family: Arial, Verdana, Helvetica, sans-serif;
text-decoration: none;
color: #000000;
font-size: 12px;
}
A.rightnav:visited
{
color: #000000;
text-decoration: none;
}
A.rightnav:hover
{
color: #000000;
text-decoration: none;
}
TD.left-main-nav {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #333366;
font-weight: normal;

}
TD.Sec-Nav-cell {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #FFFFFF;
background-color: 051947;
font-weight: bold;
}


/* Side Menu Navigation
---------------------------------------------------------------
*/

div#nav {float: left; width: 7em; margin: -1px 0 0 -1px;
background: #FDD;}
div#nav ul {margin: 0; padding: 0; width: 7em; background: white;
border: 1px solid #AAA;}
div#nav li {position: relative; list-style: none; margin: 0;
border-bottom: 1px solid #CCC;}
div#nav li:hover {background: #EBB;}
div#nav li.submenu {background: #A3B62C;}
div#nav li.submenu:hover {background-color: #EDD;}
div#nav li a {display: block; padding: 0.25em 0 0.25em 0.5em;
text-decoration: none; width: 6.5em;}
div#nav>ul a {width: auto;}
div#nav ul ul {position: absolute; top: 0; left: 7em;
display: none;}
div#nav ul.level1 li.submenu:hover ul.level2,
div#nav ul.level2 li.submenu:hover ul.level3 {display:block;}


I took the Eric Meyer sample from Chapter 6 and threw the same CSS lines into the very bottom of the file used on the LRA site, with some color adjustments. Here is his original which seems to work:
http://wienergraphics.com/LRA/ch0611.html

I updated the CSS file on the server in my "css" folder to include the behavior in the body rule referencing csshover.htc and put that file in my css folder as well.

It looks fine in Firefox, and of course his sample looks good in IE, so something else in this CSS file must be conflicting with the rules of the drop-down for IE.

[fyred1]

I just checked it in firefox and ie7 beta and it works fine as far as I can tell. What exactly is happening to it?

[wienerdog]

IE 6 is showing it like this:
(I've highlighted in Photoshop the error in positioning in IE6-Windows)

Full-size screen-shot:
http://wienergraphics.com/LRA/IE6-screenshot.gif

[cjoe]

simply because it doesn't. I.E. doesn't allow CSS to work in this way.

[flutterby nut]

i was doing a similar flyout a couple weeks ago from nickrigby.com...went back and did his original css flyout that he developed first because i only needed one level...it works in ie, firefox, netscape, opera, later versions...didn't test it on a mac, or older browser versions...if you can't get eric's to work, perhaps another might...he references tanfa's work for multi-level flyouts as well...

not sure if you're aware of this, but i viewed your size with a minimized window...when i scrolled down to access the menu, it jumped away from the cursor...which was kind of a fun and entertaining effect, but makes clicking a challenge after scrolling...

good luck...i feel your pain...ie makes things really frustrating!

[wienerdog]

simply because it doesn't. I.E. doesn't allow CSS to work in this way.

So why does his sample work when it's by itself in IE 6? That's what I don't get, it works in his sample in IE 6 but not when I put it in my CSS file.

[wienerdog]

i was doing a similar flyout a couple weeks ago from nickrigby.com...went back and did his original css flyout that he developed first because i only needed one level...it works in ie, firefox, netscape, opera, later versions...didn't test it on a mac, or older browser versions...if you can't get eric's to work, perhaps another might...he references tanfa's work for multi-level flyouts as well...

not sure if you're aware of this, but i viewed your size with a minimized window...when i scrolled down to access the menu, it jumped away from the cursor...which was kind of a fun and entertaining effect, but makes clicking a challenge after scrolling...

good luck...i feel your pain...ie makes things really frustrating!

I'll take a look at it, if it truly works in IE 6 for Win. As long as that's true, I can get my boss off my case. :)

[fyred1]

In your WinIE behavior call you used

behavior: url(css/csshover.htc); /* WinIE behavior call */}

instead of

behavior: url(css/csshover.htc);} /* WinIE behavior call */

see the difference?

[wienerdog]

In your WinIE behavior call you used

behavior: url(css/csshover.htc); /* WinIE behavior call */}

instead of

behavior: url(css/csshover.htc);} /* WinIE behavior call */

see the difference?

Nope, it didn't work, fyred1. I made the change to the CSS file and I thought you had it for a minute.
http://www.wienergraphics.com/LRA/solutions_test.html

Here's the CSS:
/* GENERAL
-------------------------------------------------------------------------*/
body {
margin: 0;
padding: 0;
background-color: #ffffff;
font: normal 12px Geneva, Verdana, Arial, sans-serif;
color: #666;
text-align: center;
behavior: url(css/csshover.htc);} /* WinIE behavior call */


#header {
width: 695px;
height: 102px;
margin: 0px;
}

#content {
position: relative;
margin-top: 30px;
}

#container {
margin: 0 auto;
text-align: left;
width: 695px;
}

.indent {
padding: 10px;
}

.pop {
background-color: #212C56;
color: #fff;
text-align: left;
padding: 25px;
}

.pop_title {
font: bold 14px Verdana, Helvetica, Arial, sans-serif;
color: #C6C41E;
}


#cs_quote {
font-decoration: italic;
margin: 5px;
float: left;
}

.title3 {
font: bold 11px Verdana, Helvetica, Arial, sans-serif;
text-transform: uppercase;
}

.orange {
font: bold 11px Verdana, Helvetica, Arial, sans-serif;
color: #FB8510;
}

#hide
{visibility: hidden;}


#old-flash {
font: bold 14px Verdana, Helvetica, Arial, sans-serif;
color: #ffffff;
background-color: #C6C41E;
text-align: center;
}
/* HOME
-------------------------------------------------------------------------*/


#home-right {
float: right;
width: 218px;
text-align: left;
font-family: Arial, Verdana, Helvetica, sans-serif;
text-decoration: none;
color: #000000;
font-size: 12px;
}
#homeright1
{
width: 218px;
text-align: left;
font-family: Arial, Verdana, Helvetica, sans-serif;
text-decoration: none;
color: #000000;
font-size: 12px;
}

#homeright2
{
width: 218px;
text-align: left;
font-family: Arial, Verdana, Helvetica, sans-serif;
text-decoration: none;
color: #000000;
font-size: 12px;
font-weight: bold;
}
#homeright3
{
width: 218px;
text-align: left;
font-family: Arial Black, Verdana, Helvetica, sans-serif;
text-decoration: none;
color: #000000;
font-size: 12px;
}
#homeright4
{
width: 218px;
text-align: left;
font-family: Arial Black, Verdana, Helvetica, sans-serif;
text-decoration: none;
color: #000000;
font-size: 12px;
font-weight: bold;
}
#homeright5
{
width: 218px;
text-align: left;
font-family: Impact, Verdana, Helvetica, sans-serif;
text-decoration: none;
color: #000000;
font-size: 12px;
}
#homeright6
{
width: 218px;
text-align: left;
font-family: Impact, Verdana, Helvetica, sans-serif;
text-decoration: none;
color: #000000;
font-size: 12px;
font-weight: bold;
}
#homeright7
{
width: 218px;
text-align: left;
font-family: Trebuchet MS, Verdana, Helvetica, sans-serif;
text-decoration: none;
color: #000000;
font-size: 12px;
}
#homeright8
{
width: 218px;
text-align: left;
font-family: Trebuchet MS, Verdana, Helvetica, sans-serif;
text-decoration: none;
color: #000000;
font-size: 12px;
font-weight: bold;
}
#homeright9
{
width: 218px;
text-align: left;
font-family: Verdana, Helvetica, sans-serif;
text-decoration: none;
color: #000000;
font-size: 12px;
font-weight: bold;
}
#homeright10
{
width: 218px;
text-align: left;
font-family: Verdana, Helvetica, sans-serif;
text-decoration: none;
color: #000000;
font-size: 12px;
font-weight: bold;
}

#home-left {
margin: 0px 0px 0px 0px;
float: left;
width: 413px;
}

#home-flash1 {
margin: 0px 0px 0px 0px;
float: left;
width: 590px;
}

#home-flash2 {
margin: 0px 0px 0px 0px;
float: left;
}

#home-flash {
}

/* sub
-------------------------------------------------------------------------*/


#sub-right {
margin: 0px 0px 0px 545px;
width: 140px;
text-align: left;
}

#sub-right-industry {
margin: 17px;
font: bold 10px Verdana, Helvetica, Arial, sans-serif;
}

#sub-contain {
margin: 0px 0px 0px 0px;
float: left;
text-align: left;
width:510;
}


#sub-mid {
margin: 0px 0px 0px 172px;
width: 340px;
}


#sub-mid-right {
margin: 0px 0px 0px 172px;
width: 500px;
}


#sub-left {
margin: 0px 0px 0px 0px;
float: left;
width: 147px;
}


#sub-text {
font: 11px Verdana, Helvetica, Arial, sans-serif;
color: #000;
margin: 20px 10px 10px 10px;
}


#contact1 {
color: #000;
background-color: #fff;
padding: 15px;
border-style: solid;
border-width: 1px;
border-color: #333;
width: 300px;
}

.required {
color: #c00;
}


/* LINKS
-------------------------------------------------------------------------*/
a:link, a:active, a:visited {
color:#000000;
text-decoration:underline;
}
a:hover {
color:#000000;
text-decoration:none;
}

a.menu: a:link, a:active, a:visited {
color:#00255B;
text-decoration:none;
}
a.menu:hover {
color:#A0B529;
text-decoration:none;
}

a.utility-1:link, a.utility-1:active, a.utility-1:visited {
color:#666666;
text-decoration:none;
}
a.utility-1:hover {
color:#000;
text-decoration:none;
}

a.utility_2:link, a.utility_2:active, a.utility_2:visited {
color:#909090;
text-decoration:none;
}
a.utility_2:hover {
color:#00486D;
text-decoration:none;
}

a.utility_3:link, a.utility_3:active, a.utility_3:visited {
color:#666666;
text-decoration:underline;
}
a.utility_3:hover {
color:#000;
text-decoration:none;
}

a.utility_4:link, a.utility_4:active, a.utility_4:visited {
color:#1970A2;
text-decoration:underline;
}
a.utility_4:hover {
color:#666;
text-decoration:none;
}


a.utility_white:link, a.utility_white:active, a.utility_white:visited {
color:#fff;
text-decoration:none;
}
a.utility_white:hover {
color:#fff;
text-decoration:none;
}

a.footer-main:link, a.footer-main:active, a.footer-main:visited {
color:#909090;
text-decoration:none;
}
a.footer-main:hover {
color:#000;
text-decoration:none;
}


a.footer-privacy:link, a.footer-privacy:active, a.footer-privacy:visited {
color:#909090;
text-decoration:underline;
}
a.footer-privacy:hover {
color:#000;
text-decoration:none;
}


/* TEXT TREATMENTS
-------------------------------------------------------------------------*/
body {
font: normal 12px Geneva, Verdana, Arial, sans-serif;
color: #666;
}

.blue_bold {
font: bold 11px Verdana, Helvetica, Arial, sans-serif;
color: #00255B;
}

.text-1 {
font: 11px Verdana, Helvetica, Arial, sans-serif;
color: #000;
margin: 0px 10px 0px;
}

.text-2 {
font: bold 11px Verdana, Helvetica, Arial, sans-serif;
font-style: italic;
color: #000;
margin: 0px;
}

.text-3 {
font: bold 11px Verdana, Helvetica, Arial, sans-serif;
color: #000;
margin: 0px;
}

.text-5 {
font: bold 12px Verdana, Helvetica, Arial, sans-serif;
color: #fff;
margin: 0px;
}

.home-news {
font: 11px Verdana, Helvetica, Arial, sans-serif;
color: #000;
margin: 0px 10px 0px;
}

.home-newsdate {
font: 11px Verdana, Helvetica, Arial, sans-serif;
color: #FB7C00;
margin: 0px 10px 0px;
}

.breadcrumb-nav {
font: 11px Verdana, Helvetica, Arial, sans-serif;
color: #666666;
}

.orange {
color: #FC7D00;
}

#footer {
font: 9px Arial, Helvetica, sans-serif;
color: #666;
}

/* FOOTER
-------------------------------------------------------------------------*/

#footer {
position: relative;
clear: both;
margin: 30px 3px 10px;
width: 689px;
height: 10px;
}

#footer-right {
margin: 0px 3px 0px 305px;
width: 370px;
text-align: right;
}

#footer-left {
margin: 0px 0px 0px 3px;
float: left;
width: 300px;
}

TD.leftnav
{
background: #FAF3CF;
font-family: Verdana, Arial, Helvetica, sans-serif;
text-decoration: none;
color: #000000;
font-size: 10px;
}
TD.black
{
background: #000000;
}
A.leftnav
{
text-decoration: none;
}
A.leftnav:visited
{
text-decoration: none;
}
A.leftnav:hover
{
text-decoration: none;
}

A.rightnav
{
font-family: Arial, Verdana, Helvetica, sans-serif;
text-decoration: none;
color: #000000;
font-size: 12px;
}
A.rightnav:visited
{
color: #000000;
text-decoration: none;
}
A.rightnav:hover
{
color: #000000;
text-decoration: none;
}
TD.left-main-nav {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #333366;
font-weight: normal;

}
TD.Sec-Nav-cell {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #FFFFFF;
background-color: 051947;
font-weight: bold;
}


/* Side Menu Navigation
---------------------------------------------------------------
*/

div#nav {
float: left;
width: 7em;
background: #FDD;
}

div#nav ul {
margin: 0;
padding: 0;
width: 7em;
background: white;
border: 1px solid;
}

div#nav li {
position: relative;
list-style: none;
margin: 0;
border-bottom: 1px solid #CCC;
}

div#nav li:hover {
background: #EBB;
}

div#nav li.submenu {
background: #A3B62C;
}

div#nav li.submenu:hover {
background-color: #EDD;
}

div#nav li a {
display: block;
padding: 0.25em 0 0.25em 0.5em;
text-decoration: none;
width: 6.5em;
}

div#nav>ul a {
width: auto;
}

div#nav ul ul {
position: absolute;
top: 0;
left: 7em;
display: none;
}

div#nav ul.level1 li.submenu:hover ul.level2, div#nav ul.level2 li.submenu:hover ul.level3 {
display:block;
}

[fyred1]

That's all that I could find that was different from the original. I don't have IE6 installed anymore so it makes it hard to check what's going on. I'm stumped. Have you tried putting the windows specific file in your root directory instead of the css folder? Maybe that'll help. I don't know for sure.

[wienerdog]

Someone fixed it for me! My #container {margin: 0 auto; text-align: left; width: 695px;} needs a float: left rule. Whew!

[fyred1]

Floating your main container left pushes your entire page left.