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
}
----------------------