3 replies [Last post]
WingsDove
WingsDove's picture
Offline
newbie
Chicago area, IL USA
Last seen: 11 years 7 weeks ago
Chicago area, IL USA
Timezone: GMT-5
Joined: 2011-03-31
Posts: 5
Points: 7

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: http://www.griefcounselor.org/new/index.html

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

WingsDove
WingsDove's picture
Offline
newbie
Chicago area, IL USA
Last seen: 11 years 7 weeks ago
Chicago area, IL USA
Timezone: GMT-5
Joined: 2011-03-31
Posts: 5
Points: 7

There is also a problem with

There is also a problem with hover colors but I think I can work those out.

Deuce
Deuce's picture
Offline
Guru
Somewhere, USA
Last seen: 4 years 44 weeks ago
Somewhere, USA
Timezone: GMT-5
Joined: 2005-11-20
Posts: 4424
Points: 1843

Mods. Please close this

all ยป http://dictionary.reference.com/browse/all

Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 19 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Thread closed. see

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me