Tim Dawson wrote:
> I have a CSS drop-down navigation system that works fine in FF, IE 6&7 and (I
> believe) in Safari. Recently I discovered that in the AOL rendering of IE7
> the
> drop-downs displayed with a small gap (perhaps 2 or three pixels) between
> them
> and the permanent menu items above. I couldn't move the mouse across the gap
> without the drop-downs vanishing (unless I moved very fast).
This is because of this div#nav ul ul {top: 22px;}
> I could move the drop-downs up for all browsers, but it wouldn't look so good
> in
> FF. Is there a way to sniff for AOL and include some hack ?
Do NOT hack when the CSS is problematic in the first place. You have sent it
crazy.
> I've already got some special CSS for IE, using the conditional [if IE] etc.
I will not dare to look what these CC contain, but if any of it involves this
menu. Remove those rules.
> The secondary problem is that I'd have no ready means of testing such a hack.
Why? What browsers do you have? I seem to collect them myself :-)
Ok the present problematic CSS:
div#nav ul {
margin: 0;
padding: 0;
background: #FDFDFD; /* DELETE, does nothing since the child li are
floated and reduces the height to possibly zero */
}
div#nav li {
position: relative;
float: left; /* Shrink wrap the anchor */
width: auto; /* DELETE, already a block element plus the width is
dictated by the width child anchor elements */
list-style: none;
margin: 0;
}
div#nav li.main { /* this class is superficial since it could be easily
overrule */
background: #FEF699; /* the same background color as div#nav */
width: auto ; /* DELETE, already a block element */
padding: 0 5px; /* DELETE, padding can be added to anchor */
}
div#nav li.main a {
width: auto; /* DELETE, an anchor is an inline element width 100% or
auto does nothing */
}
div#nav ul.level2 {
z-index: 5; /* DELETE, this z-index should be given the the grandfather
div#nav */
}
div#nav ul.level2 a {width: 83px;} /* DELETE, give the width the the child
anchors instead */
div#nav li.main:hover { /* this class is superficial since it could be easily
overrule */
background: #8E9BBB; /* DELETE, aplly this to a:hover */
background-position: 0 0; /* DELETE, one fix for sticky bug, this
means that you are feeding the script to IE7 */
}
/* The above five selectors and declaration blocks can be completely removed */
div#nav li a {display: block; padding: 3px 6px 3px 6px; text-decoration: none;}
/* width: 72px; removed, no change in FF but effect in IE uncertain
This width is overrule by width auto below
*/
div#nav>ul a {width: auto; } /* DELETE WHOLE SELECTOR */
/* I don't see that this has any affect right now, but it's part of an IE6
work-around
This is because you have display block above, the anchor now behaves as a block
element
*/
div#nav ul.level2 li:hover { /* DELETE WHOLE SELECTOR, see new one below */
background: #FEF699; /* just one sticky hover bug fix */
}
div#nav ul ul {
position: absolute;
left: -999em; /* CHANGE to 9999% to bring into view, ems don't work */
top: 22px; /* DELETE, this is why you have to do the magic jumpimg in
the first place
Since the anchor is a block, the height of it will pushed this ul below it */
width: 95px; /* DETETE */
border: 1px solid #8E9BBB; /* CHANHE, see below */
border-bottom: 0; /* CHANHE, see below */
}
div#nav ul ul li { /* DELETE WHOLE SELECTOR */
border-bottom: 1px solid #8E9BBB; /* DELETE, give the border to the
anchor li li a */
text-align: right; /* DELETE, this make it hard to read */
}
div#nav ul ul ul li {border-bottom: 1px solid #8E9BBB; text-align: left;} /*
DELETE, as above */
div#nav li:hover ul ul, div#nav li.sfhover ul ul {left: -999em;} /* DELETE, see
link */
div#nav li li:hover ul, div#nav li li.sfhover ul {top: 0; left: 95px;} /*
DELETE, see link */
This is the complete revised (and much lighter) CSS:
div#nav {
float:left; position: relative; z-index:1; width: 770px; background: #FEF699;
border-bottom: 1px solid #8E9BBB;
}
div#nav ul {
margin: 0; padding: 0;
}
div#nav li {
position: relative; float: left; list-style: none; margin: 0;
}
div#nav li a {display: block; padding: 5px 10px; text-decoration: none;}
div#nav li li a {width: 10em; border-top: 1px solid #8E9BBB; border-right: 1px
solid #8E9BBB;}
div#nav li a:hover {background: #8E9BBB;} /* ADD */
div#nav li a:focus, div#nav li a:focus {/* ADD color for accesibilty */}
div#nav li li a:hover {background: white;} /* ADD */
div#nav li li a:focus, div#nav li li a:focus {/* ADD color for accesibilty */}
div#nav li:hover li a {background: white;} /* ADD, for unhover submenu items */
div#nav ul ul {position: absolute; left: -9999%; border-left: 1px solid
#8E9BBB; border-bottom: 1px solid #8E9BBB; }
/* positions submenus well off screen (hides them until the main menu item is
hovered)*/
div#nav li:hover ul ul, div#nav li.sfhover ul ul {left: -9999%;}
/* prevents level 3 showing when level 1 hovered */
div#nav li:hover ul, div#nav li.sfhover ul, div#nav li li:hover ul, div#nav li
li.sfhover ul {left: 0;}
div#nav li li:hover ul, div#nav li li.sfhover ul {margin-left: 100%;}
Now you can remove every single class form the HTML that is below div#nav.
Notice how there are no classes given above. Also it should work in most
browsers now. This menu [1] may aid in you giving different sub anchors
different widths. Also some box model hacks for IE5. This menu is explain
further in the main article [2]. Please note that the article as it stand is a
complete mess and need urgent revision.
BTW, that page has markup validation errors [3].
1. <http://css-class.com/articles/ursidae/bears4.htm>
2. <http://css-class.com/articles/ursidae/bears4.htm>
3. <http://validator.w3.org/>
Alan
http://css-class.com/
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
