Hi, I'm trying to make a simple 2-level all-CSS nav menu: first level
horizontal, second level "flyover" vertical. It looks fine in Firefox
and Safari, but not IE6. Here's a test page:
http://dev.firpoint.wd-2.net/
notes before going on...:
[1] In case you're viewing it only in IE6: the menu with the links
"Foo", "Bar", etc. is supposed to appear directly *below* the "FBC"
link in the primary nav menu.
[2] I've temporarily disabled the flyover aspect in order to see if the
positioning was going to work right in IE. The flyover effect relies
on compliant ":hover" behavior, and I know there are solutions for this
on IE (Dean Edward's "IE7", and behavior-based solutions) and I will
tackle that as soon as I have the positioning fixed.
[3] The secondary drop-down menu is a <ul> nested within the <li> that
contains the corresponding primary nav item. The nested <ul> uses
"position: absolute", and the parent <li> has "position: relative".
[4] I was setting "width: 100%" on the containing <li> to trigger
hasLayout in IE, but I've removed it (see note [6] below).
I just do not understand what IE's doing here. The screwy thing about
it is that the horizontal positioning is correct, it's only the
vertical that's hosed!
Further notes, more screwiness:
[5] If I remove the "position: relative" from the containing <li>, the
absolutely-positioned nested <ul> reverts to another position relative
to the next outermost enclosing block, which proves that with the
"position: relative" on the <li>, IE really does think it's positioning
the <ul> relative to the enclosing <li>. In other words, the apparent
correct horizontal positioning is truly due to absolute positioning
relative to the <li>, it's not just a fluke where things happen to line
up in a way that looks correct. So if the horizontal is really
correct, I just can't figure out why the vertical is fubar'd. (Note,
changing the "top" property on the <ul> does move it up and down).
[6] I found that if I removed my "width: 100%" hasLayout trigger from
the <li>, it made no difference! So it seems that (given [5]), this
<li> is getting layout anyway, although it has no properties that are
thought to be hasLayout triggers...?
[7] In another experiment, I have tried removing the "top" property
from the nested <ul>. In IE6, this causes the <ul> to be positioned
right on top of the enclosing <li>!!! So in this case, it really gets
it right; it's obviously trying to position relative to the <li>. Next
I added the "top" property back in, but changed the value from "top:
1.3em" (like you see it now) to "top: 0" (which should be just like
having no "top" at all), and when I did that IE snuggled the <ul> right
back up against the top of the screen again. Bizarro!
So, I'm kind of out of ideas... does anyone have a clue what is going
on and how I can whip IE into submission here?
Thanks a lot,
—ml—
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
