Vertical CSS menu - in IE6 hover does not trigger except over text

Richard

A menu page has a set of A tages in a UL

The menu (in IE) will only get the hover visualization if the mouse
rolls over underlined text. I want it to happen if the rollover occurs
anywhere in the A cell (which appears to have been expanded to fill the
LI container it is in).

In FF 1.0.5.2 and Opera 9 things work as expected.

How might the CSS be changed to ensure (in IE) the mouse rolling over
any part of the A causes a hover effect?

Some other wonky parts (IE).
ul#menu li {
; xborder:4px solid blue /* debug */
; background-color: #CCC
....
The LI cell appears to be larger than one expects.
Setting the LI border to a non-zero value
; border:4px solid blue /* debug */
causes the largerness weirdness to go away.
menu.html
----------------------
<HTML>
<HEAD>
<link REL="StyleSheet" TYPE="text/css" HREF="my.css">
</HEAD>
<BODY>
<UL ID="menu">
<LI><A HREF="One.pdf#view=FitH">One</A></LI>
<LI><A HREF="Two/index.html">Two</A></LI>
<LI><A HREF="Three/index.html">Three has much to say</A></LI>
<LI><A HREF="Four/">Four</A></LI>
<LI><A HREF="Five/">Five</A></LI>
<LI><A HREF="Six/">Six</A></LI>
</UL>
</BODY></HTML>
----------------------

my.css
----------------------
body
{ font-family:sans-serif
}

ul#menu {
; list-style: none
; margin:4px
; padding: 0
; width: 9em
; border: 4px solid red /* debug */
}

ul#menu li {
; xborder:4px solid blue /* debug */
; background-color: #CCC
; font-weight:bold
; margin-left: 4px
; margin-right: 4px
; margin-bottom: 1em
; display: block
}

ul#menu li a
{ border:4px solid green
; display: block
; color: #222
; text-decoration: underline
; padding:6px
}

ul#menu li a:hover
{ color: #E2144A
; color: #000
; background: yellow
}

ul#menu li a:active
{ color: #E2144A
; color: #000
; background: #e9e9d0
}
----------------------

May 11 '06 #1

Follow Post Reply

8310

Thomas Mlynarczyk

Also sprach Richard:

The menu (in IE) will only get the hover visualization if the mouse
rolls over underlined text. I want it to happen if the rollover
occurs anywhere in the A cell (which appears to have been expanded to
fill the LI container it is in).

This is another IE bug that has to do with an internal property called
"hasLayout". Elements in IE that do not have it may behave strangely. Some
CSS properties cause an element to "have layout". Among them: width/height
(not set to "auto"!) or the proprietary "zoom".

You could thus specify a width or height for A to solve the problem:

/* Fix IE Win \*/
* html a { height: 1px; }
/* End Fix */

This is a hack that lets only IE Win [1] "see" the rule. As IE treats height
as min-height (which, ironically, it does not support) the A element will
still expand to whatever height is needed to accomodate its content.

So, whenever IE does not behave as expected, try setting an explicit
dimension for the element in question (or just insert a "zoom: 1" for
testing) - in many cases, this helps.

AFAIK, IE 7, when in strict mode, will - like a real browser - no longer see
the rule, but I don't know if M$ has fixed the bug that makes the hack
necessary in the first place.

Greetings,
Thomas

[1] The comment lines cause IE Mac to ignore the rule, as that browser does
not need this fix (but chokes up on the backslash, thereby missing the end
of the first comment). You can add other IE specific rules between the
comments, but no other comments.

May 15 '06 #2

Vertical CSS menu - in IE6 hover does not trigger except over text

This discussion thread is closed

Similar topics