469,286 Members | 2,442 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,286 developers. It's quick & easy.

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

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
1 8229
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

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

4 posts views Thread by Nicholas | last post: by
3 posts views Thread by unurban | last post: by
18 posts views Thread by Ste | last post: by
2 posts views Thread by Ravi Joshi | last post: by
13 posts views Thread by Bill | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.