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?

[Andy Dingley]

fehays wrote:

I'm having a problem with the css hover effect in IE.

a { width: 100%; }

[fehays]

On Oct 6, 4:35 pm, "Andy Dingley" <ding...@codesm iths.comwrote:

fehays wrote:

I'm having a problem with the css hover effect in IE.a { width: 100%; }

Andy,

You're right, that would work with the code I posted, however, I tried
to simplify my actuall code and in doing so, I made a mistake.

The HTML looks like this:
<div>
<a href="dir" class="subNavIt em">click</a>
</div>

So the parent <divdoes not have a width set. This is because I want
the div to just expand with the text.

So, with your solution, if I add 100% width to the <ait stretches out
beyond the parent <div>

Any ideas?

Thanks.

[Els]

fehays wrote:

On Oct 6, 4:35 pm, "Andy Dingley" <ding...@codesm iths.comwrote:

>fehays wrote:

>>I'm having a problem with the css hover effect in IE.a { width: 100%; }

Andy,

You're right, that would work with the code I posted, however, I tried
to simplify my actuall code and in doing so, I made a mistake.

The HTML looks like this:
<div>
<a href="dir" class="subNavIt em">click</a>
</div>

So the parent <divdoes not have a width set. This is because I want
the div to just expand with the text.

So, with your solution, if I add 100% width to the <ait stretches out
beyond the parent <div>

No it doesn't, the parent div is also 100% of its parent.
Instead of width, you can use height too. If you're sure the link text
won't wrap, you can set a height of 1.2em for example.
But you'll still need to set a limit on the width if you don't want it
to take up the full available width inside its parent.

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

Now playing: Various - Nebukadnezar

[Ben C]

On 2006-10-06, fehays <fe****@gmail.c omwrote:
[snip]

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?

The <ais display: block and width: auto, so it should automatically
fill all its available width. Which I'm guessing it is doing for some
purposes (or you'd have mentioned the background colour not extending to
the full width).

So sounds like the IE bug is in the way they implement hover. Maybe it
has something to with <a>s. There's no way to tell except experimenting
with random permutations of the content.

Knowing this doesn't help much, except that the strategy changes.

[Els]

Ben C wrote:

So sounds like the IE bug is in the way they implement hover. Maybe
it has something to with <a>s. There's no way to tell except
experimenting with random permutations of the content.

Some things are well documented. Hover extending to full width of the
<aelement in IE is one of them. It just needs a set width or height.

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

Now playing: Elly & Rikkert - Kauwgomballenbo om

[Bergamot]

Els wrote:

>
Some things are well documented. Hover extending to full width of the
<aelement in IE is one of them. It just needs a set width or height.

or zoom:1

--
Berg

[fehays]

On Oct 7, 1:48 am, Ben C <spams...@spam. eggswrote:

On 2006-10-06, fehays <feh...@gmail.c omwrote:
[snip]

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?The <ais display: block and width: auto, so it should automatically

fill all its available width. Which I'm guessing it is doing for some
purposes (or you'd have mentioned the background colour not extending to
the full width).

So sounds like the IE bug is in the way they implement hover. Maybe it
has something to with <a>s. There's no way to tell except experimenting
with random permutations of the content.

Knowing this doesn't help much, except that the strategy changes.

Ben,

Yes, you are correct. The background color, border, etc are all
filling out the width fine. It is ONLY the hover that is not working
as desired in IE.

Sounds like as Els said, I need to have the width or height set.
Problem is, the text is dynamic so I can't set a height or width. I
may just have to live with the hover behavior in IE unless there is
another way.

-FH

[Els]

fehays wrote:

On Oct 7, 1:48 am, Ben C <spams...@spam. eggswrote:

>On 2006-10-06, fehays <feh...@gmail.c omwrote:
[snip]

>>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?The <ais display: block and width: auto, so it should automatically

fill all its available width. Which I'm guessing it is doing for some
purposes (or you'd have mentioned the background colour not extending to
the full width).

So sounds like the IE bug is in the way they implement hover. Maybe it
has something to with <a>s. There's no way to tell except experimenting
with random permutations of the content.

Knowing this doesn't help much, except that the strategy changes.

Ben,

Yes, you are correct. The background color, border, etc are all
filling out the width fine. It is ONLY the hover that is not working
as desired in IE.

Sounds like as Els said, I need to have the width or height set.
Problem is, the text is dynamic so I can't set a height or width. I
may just have to live with the hover behavior in IE unless there is
another way.

I don't get it. If the text width is dynamic, how do you define the
width of the <aelement at all, even before hovering? Full width?
That's 100%. As Bergamot says in his reply in this thread, zoom:1 is
also an option. It will still fill out the <aelement for the same
width as width:100% does though.

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

[fehays]

Els wrote:

fehays wrote:

On Oct 7, 1:48 am, Ben C <spams...@spam. eggswrote:

On 2006-10-06, fehays <feh...@gmail.c omwrote:
[snip]

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?The <ais display: block and width: auto, so it should automatically
fill all its available width. Which I'm guessing it is doing for some
purposes (or you'd have mentioned the background colour not extending to
the full width).

So sounds like the IE bug is in the way they implement hover. Maybe it
has something to with <a>s. There's no way to tell except experimenting
with random permutations of the content.

Knowing this doesn't help much, except that the strategy changes.

Ben,

Yes, you are correct. The background color, border, etc are all
filling out the width fine. It is ONLY the hover that is not working
as desired in IE.

Sounds like as Els said, I need to have the width or height set.
Problem is, the text is dynamic so I can't set a height or width. I
may just have to live with the hover behavior in IE unless there is
another way.

I don't get it. If the text width is dynamic, how do you define the
width of the <aelement at all, even before hovering? Full width?
That's 100%. As Bergamot says in his reply in this thread, zoom:1 is
also an option. It will still fill out the <aelement for the same
width as width:100% does though.

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

Well yes I do want full width. 100%. But, if I set the <ato 100%, it
stretches the <divthat it is contained in. I'm assuming this is also
because the div does not have a width set? But again, I cannot set the
width of the <diveither because of the dynamic text. Maybe i'm doing
something else wrong??