2 replies [Last post]
troutdream
Offline
newbie
Last seen: 10 years 28 weeks ago
Timezone: GMT-7
Joined: 2006-08-16
Posts: 10
Points: 0

I am using the multi-level menu code described in the Tools section of this site. Mostly I love it. But I'm having some trouble in IE7.

1. Something is causing about 4-5 pixels of vertical space between the menu items. Aside from looking bad, it makes it impossible to reach all the flyout menu items as the submenus disappear when the cursor goes over the gap.

2. The flyout block (but not the text) appears for all levels when you mouse over the first level. The text appears appropriately when you mouse over the correct block.

I've tried everything I can think of to track down the extra space, but all margins are set to 0 and all padding except for one element is set to 0 (and I tested that one). The CSS validates. The HTML does not validate, but the errors are mostly related to embedded third party elements (flash, feedburner, constantcontact). As far as I can tell, none of the HTML errors would affect the menu.

My test page is here: http://www.atlas-inspection.com/newsite/template.html
The CSS file is here: http://www.atlas-inspection.com/newsite/styles.css

The menu details are here: http://csscreator.com/menu/multimenu.php

Thank you very much in advance for your help!

troutdream
Offline
newbie
Last seen: 10 years 28 weeks ago
Timezone: GMT-7
Joined: 2006-08-16
Posts: 10
Points: 0

One additional question: In

One additional question:

In Firefox, the top horizontal menu dropdowns push the main content out of the way. I'm not sure how to fix that.

Thanks again!

troutdream
Offline
newbie
Last seen: 10 years 28 weeks ago
Timezone: GMT-7
Joined: 2006-08-16
Posts: 10
Points: 0

Another menu. I've found a

Another menu.

I've found a simpler, pure-CSS menu that actually works in IE and I'm trying it out here:
http://www.atlas-inspection.com/newsite/template3.html

This is the CSS for the menu:

ul.makeMenu, ul.makeMenu ul {
width : 181px;
background-color : #c6c1ce;
padding : 0;
cursor : default;
margin : 0;
}
ul.makeMenu li {
list-style-type : none;
margin : 0;
position : relative;
color : #1e0576;
font-size : 11px;
font-weight : bold;
font-family : Verdana, Arial, Helvetica, sans-serif;
border-bottom : 1px solid #ffffff;
padding : 4px;
text-align : right;
}
ul.makeMenu li > ul {
display : none;
position : absolute;
top : 0;
left : 182px;
}
ul.makeMenu li:hover, ul.makeMenu li.CSStoHighlight {
background-color : #ddd9e2;
}
ul.makeMenu ul.CSStoShow {
display : block;
}
ul.makeMenu li:hover > ul {
display : block;
}
ul.makeMenu li a {
color : #1e0576;
display : block;
width : 100%;
text-decoration : none;
}
ul.makeMenu li a:hover, ul.makeMenu li a.CSStoHighLink {
background-color : #ddd9e2;
}
ul.makeMenu ul {
display : none;
position : absolute;
top : 2px;
left : 78px;
}
.menu2link {
color : #c13832;
}

And the rest of the CSS is in http://www.atlas-inspection.com/newsite/styles.css

Obviously, the problem I need to fix is how to get the main content back up to the top. I'm sure it's some little thing, but I can't find it. The CSS validates.

Thanks once more!