Mark Lundquist wrote:
> 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/
>
> ...
> [6] I found that if I removed my "width: 100%" hasLayout trigger from
> the <li>, it made no difference!
You're right, IE needs layout (in addition to position:relative here) to
determine the correct containing block for absolute positioning [1].
But your code
ul.nav-level-1 li {
display: inline;
...
position:relative;
}
sets li to inline level - to acquire the horizontal orientation.
The problem is that 'width' does not apply to inline level elements in
standards mode [2].
So it really makes no difference; width:100% is ignored.
Therefore, you'll need another haslayout trigger here: zoom:1
does apply to inline level elements [3].
Or why not float them?
Ingo
[1] http://www.satzansatz.de/cssd/onhavinglayout.html#cb
[2] http://www.w3.org/TR/CSS21/visudet.html#propdef-width
[3] http://www.satzansatz.de/cssd/onhavinglayout.html#inline
--
http://www.satzansatz.de/css.html
______________________________________________________________________
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/
