Flyout Menu Issue with I/E

HTML & CSS
1

Hi,

I am finishing up a new design for an old client and having trouble finding 2 problems that are caused by the css code for the flyout menu in I/E.

The web site: Chicago Psychotherapist Counselor Grief and Loss Counseling and Consulting - Chicago, IL

The problems: The flyout menu simply does not work in I/E.b The css code for the flyout menu is also causing each link on the page to be placed on a separate line. You can see this problem clearly in the breadcrumb trail links and the footer links.

The css code:

/* Start of Fly-Out Menu \*/

#leftcolumn { width:180px; height:400px; float:left; background-color:#2c4486; }

#leftcolumn #nav {font-size: 11pt; margin: 0px; font-family: arial; color: #FCC900;}

ul, li {
display: block;
margin: 0;
padding: 0;
border: 0px none;
}

ul {
width: 176px;
background: #2c4486;
list-style-type: none;
}

li {
position: relative;
padding: 0px;
z-index: 9;
}

li.folder {
font: normal 11pt Arial, Tahoma, Sans-Serif, Helvetica;
color: #EBDE78;
padding: 2px 0 4px 5px;
background-color: #2c4486;
border : 0px;
}

li.folder:hover {
z-index: 10;
background-color: #FCC900;
font: normal 10pt Arial, Tahoma, Sans-Serif, Helvetica;
color: #2c4486;
}

li.folder ul {
position: absolute;
display: none;
left: 160px; /* IE */
top: 5px;
}

li.folder>ul {
left: 160px;
}

ul.level1 li.folder:hover ul.level2 {
display: block;
width: 200px;
}

a {
padding: 2px;
text-decoration: none;
width: 100%; /* IE */
}

li>a {
width: auto;
}

li a.topmenu {
padding-left: 1px;
font: bold 10pt Arial, Tahoma, Sans-Serif, Helvetica;
color: #FCC900;
display: block;

}

li a.submenu {
background-color: #2c4486;
padding-left: 5px;
font: bold 10pt Arial, Tahoma, Sans-Serif, Helvetica;
color: #FCC900;
display: block;
border : 0px;
padding-top: 3px;
padding-bottom: 4px;
}

li.submenu:hover {
z-index: 10;
background-color: #FCC900;
font: normal 10pt Arial, Tahoma, Sans-Serif, Helvetica;
color: #2c4486;
}

li.explain {
font: bold 10pt Arial, Tahoma, Sans-Serif, Helvetica;
background-color: #2c4486;
border : 0px;
color: #FCC900;
padding-left: 10px;
padding-top: 4px;
padding-bottom: 4px;
width: 190px;
}

a.topmenu:visited {
color: #FCC900;
}

a.topmenu:hover {
color: #FCC900;
background-color: #2c4486;
}

#menu {
border: 0px;
margin: 0;
padding: 0;
width: 160px;
}

/* Hide from IE5-mac. Only IE-win sees this. \*/

  • html li.explain {
    width: 180px;
    }
    /* End hide from IE5/mac */

a.topmenu:hover {
color: #2c4486;
}

#menu {
border: 0px solid #000000;
margin: 0;
padding: 0;
width: 160px;
}

#link {
font: 11px Verdana, Arial, Tahoma, Sans-Serif, Helvetica;
padding: 0px 0px 0px 0px;
margin-top: 0px;
}

/* End of Flyout Menu */

–>

Any help you can give me would be very much appreciated.

Thanks

(I posted this request on another CSS forum and the only response I received was a snarky “validate your code.” If that is the only reponse I receive from anyone here, please include a link for me to go to to validate the CSS code. Yep, I never validate code but then neither does Google.)

2

Hi, Welcome to SitePoint :slight_smile:

You have all versions of IE in quirks mode due to an incomplete doctype.
Add the referring url to the end of it.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
[COLOR=Blue] "http://www.w3.org/TR/html4/loose.dtd"[/COLOR]>

After doing that your flyout starts working but you have some other issues that need to be addressed. The menu text is centered in IE.

3

Thank you so much! :weee:

You did find the problem and the solution. I was going around in circles with the CSS code. The other issues such as alignment I can work out myself.

Now I just need to look up the meaning of “quirk mode.” :google: