CSS Hover Problem in IE

[fehays]

Hello,

I'm having a problem with the css hover effect in IE. I have an <a>
tag with the following CSS:

a.subNavItem {
display:block;
color:#464645;
padding:2px 7px 4px 6px;
font-family:verdana, arial,helvetica ,sans-serif;
font-size:9px;
font-weight:bold;
text-decoration:none ;
width:inherit;
border-bottom:1px solid #C8CBC7;
white-space:nowrap;
}

The width of the <atag inherits from its parent div so that the
border and hover effect will span across the entire div.

Here's the hover css:

a.subNavItem:ho ver
{
color:#00A5E5;
text-decoration:none ;
background-color:#F5F8F4;
}

Here is the HTML:

<div style="width:40 0px">
<a href="dir" class="subNavIt em">click</a>
</div>

THE PROBLEM:

In IE, the hover effect only works when I mouse over the text itself.
So even though the <atag is 400px wide, the hover only works if you
mouse over "click". In Firefox, I can mouse over anywhere inside the
<atag that spans across the width of the div, and my hover changes
work fine. I don't want to change all of my <atags to <div>.

Does anyone know a solution to this?

[Els]

boclair wrote:

fehays wrote:

>The code below solved it, but I'm not
sure why or if it's a good idea. For some reason, adding an empty
<spandisplay ed as a block that floats left fixes the hover without
having to set the <awidth. Seems to work in Firefox and IE.

[snip code with "superfluou s" span to make it work]

Try that without the span.

Without the span the lot looks the same, but the hover will not extend
to the entire width of the gray blocks in IE.

--
Els http://locusmeus.com/
accessible web design: http://locusoptimus.com/

[boclair]

Els wrote:

boclair wrote:

>fehays wrote:

>>The code below solved it, but I'm not
sure why or if it's a good idea. For some reason, adding an empty
<spandisplaye d as a block that floats left fixes the hover without
having to set the <awidth. Seems to work in Firefox and IE.

[snip code with "superfluou s" span to make it work]

>Try that without the span.

Without the span the lot looks the same, but the hover will not extend
to the entire width of the gray blocks in IE.

Odd. See http://www.boclair.com/test/css_hover.html or have I misunderstood

Louise

[Els]

boclair wrote:

Els wrote:

>boclair wrote:

>>fehays wrote:

The code below solved it, but I'm not
sure why or if it's a good idea. For some reason, adding an empty
<spandisplay ed as a block that floats left fixes the hover without
having to set the <awidth. Seems to work in Firefox and IE.

[snip code with "superfluou s" span to make it work]

>>Try that without the span.

Without the span the lot looks the same, but the hover will not extend
to the entire width of the gray blocks in IE.

Odd. See http://www.boclair.com/test/css_hover.html or have I misunderstood

If you look carefuly while hovering, you'll notice that only the top
couple of pixels of each block (besides the text in them) are
clickable. The larger part isn't. (tested in IE5, but I think the same
will be true for IE6)

--
Els http://locusmeus.com/
accessible web design: http://locusoptimus.com/

[boclair]

Els wrote:

boclair wrote:

>Els wrote:

>>boclair wrote:

fehays wrote:

The code below solved it, but I'm not
sure why or if it's a good idea. For some reason, adding an empty
<spandispla yed as a block that floats left fixes the hover without
having to set the <awidth. Seems to work in Firefox and IE.
[snip code with "superfluou s" span to make it work]

Try that without the span.
Without the span the lot looks the same, but the hover will not extend
to the entire width of the gray blocks in IE.

Odd. See http://www.boclair.com/test/css_hover.html or have I misunderstood

If you look carefuly while hovering, you'll notice that only the top
couple of pixels of each block (besides the text in them) are
clickable. The larger part isn't. (tested in IE5, but I think the same
will be true for IE6)

I see your point. To make this behaviour more obvious I added the
a:hover selector and border rules.

It seems though, in IE6 at least, adding the top rule to the absolutely
positioned containing div corrects the hover behaviour. (Adding a left
rule without the top rule does not.)

Now see http://www.boclair.com/test/css_hover.html

Louise

[Els]

boclair wrote:

Els wrote:

>boclair wrote:

>>Els wrote:
boclair wrote:

fehays wrote:
>
>The code below solved it, but I'm not
>sure why or if it's a good idea. For some reason, adding an empty
><spandispl ayed as a block that floats left fixes the hover without
>having to set the <awidth. Seems to work in Firefox and IE.
[snip code with "superfluou s" span to make it work]

Try that without the span.
Without the span the lot looks the same, but the hover will not extend
to the entire width of the gray blocks in IE.
Odd. See http://www.boclair.com/test/css_hover.html or have I misunderstood

If you look carefuly while hovering, you'll notice that only the top
couple of pixels of each block (besides the text in them) are
clickable. The larger part isn't. (tested in IE5, but I think the same
will be true for IE6)

I see your point. To make this behaviour more obvious I added the
a:hover selector and border rules.

It seems though, in IE6 at least, adding the top rule to the absolutely
positioned containing div corrects the hover behaviour. (Adding a left
rule without the top rule does not.)

Now see http://www.boclair.com/test/css_hover.html

Yup - agreed. "top:0;" makes all the difference.
Pretty weird, isn't it? :-)

--
Els http://locusmeus.com/
accessible web design: http://locusoptimus.com/