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.)