> 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;}
Correct, but if I reduce the 22px the drop-downs encroach on the fixed menu
items, as I said below. It may be I have to accept that.
>
>
>> 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:
I'm sorry you don't like my CSS. It's taken from More Eric Meyer Project 6.
I'll try what you've suggested and see how I get on.
>
>
> 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].
Thank you. In making a small amendment I had misplaced a closing HTML comment
(-->), but I've corrected that now, and it validates again.
>
>
>
> 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/
>
> --
> This email has been verified as Virus free.
> Virus Protection and more available at http://www.plus.net
>
--
Tim Dawson
Maolbhuidhe
Fionnphort
Isle of Mull PA66 6BP
01681 700718
______________________________________________________________________
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/
