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]

Re: CSS Hover Problem in IE


fehays wrote:

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

a { width: 100%; }

[fehays]

Re: CSS Hover Problem in IE



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]

Re: CSS Hover Problem in IE

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]

Re: CSS Hover Problem in IE

On 2006-10-06, fehays <fehays@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]

Re: CSS Hover Problem in IE

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]

Re: CSS Hover Problem in IE

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]

Re: CSS Hover Problem in IE



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]

Re: CSS Hover Problem in IE

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]

Re: CSS Hover Problem in IE


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

[Els]

Re: CSS Hover Problem in IE

fehays wrote:

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?

No, this is because of the padding on the <a>.
The external width of an element is border-left-width + padding-left +
width + padding-right + border-right-width.

But again, I cannot set the
width of the <diveither because of the dynamic text. Maybe i'm doing
something else wrong??

When I want the full width of the <aelement *and* have a padding, I
usually have a <spaninside the <a>:

<div>
<a href=".."><span >link text here</span></a>
</div>

I then give the <aa width of 100%, and the padding I put on the
<span>, thus not interfering with the width of the <a>.

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

[fehays]

Re: CSS Hover Problem in IE


Els wrote:

fehays wrote:
>

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?

>
No, this is because of the padding on the <a>.
The external width of an element is border-left-width + padding-left +
width + padding-right + border-right-width.
>

But again, I cannot set the
width of the <diveither because of the dynamic text. Maybe i'm doing
something else wrong??

>
When I want the full width of the <aelement *and* have a padding, I
usually have a <spaninside the <a>:
>
<div>
<a href=".."><span >link text here</span></a>
</div>
>
I then give the <aa width of 100%, and the padding I put on the
<span>, thus not interfering with the width of the <a>.
>
--
Els http://locusmeus.com/
accessible web design: http://locusoptimus.com/

Ah I see. That does help, but I still have a problem with the <atag
expanding across the entire page when it is set to 100%. Could having
absolutely positioned <divtags make a difference? Thanks for your
help. I posted the code below.

<html>
<head>
<style>

a.subNavItem {
display:block;
/*color:#9BA897; */
color:#464645;

font-family:verdana, arial,helvetica ,sans-serif;
font-size:9px;
font-weight:bold;
text-decoration:none ;
width:100%;
border-bottom:1px solid #C8CBC7;
white-space:nowrap;
}

span{
padding:2px 7px 4px 6px;
display:block;
}

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

#navitem1
{

position:absolu te;
background-color:#E9EDE8;
border-top: 1px solid #C8CBC7;
border-left: 1px solid #C8CBC7;
border-right: 1px solid #C8CBC7;
voice-family: "\"}\"";
voice-family:inherit;

}


#navitem2 {

position:absolu te;
top:100px;
background-color:#E9EDE8;
border-top: 1px solid #C8CBC7;
border-left: 1px solid #C8CBC7;
border-right: 1px solid #C8CBC7;
voice-family: "\"}\"";
voice-family:inherit;
}


#navitem3 {

position:absolu te;
top:200px;
background-color:#E9EDE8;
border-top: 1px solid #C8CBC7;
border-left: 1px solid #C8CBC7;
border-right: 1px solid #C8CBC7;
voice-family: "\"}\"";
voice-family:inherit;
}
</style>
</head>


<body>

<div id="navitems">
<div id="navitem1">
<a href="#" class="subNavIt em"><span>lin k 1 stretch
stretchy</span></a>
<a href="#" class="subNavIt em"><span>link1 3</span></a>
<a href="#" class="subNavIt em"><span>link2 </span></a>
</div>
<div id="navitem2">
<a href="#" class="subNavIt em"><span>lin k 2</span></a>
<a href="#" class="subNavIt em"><span>lin k 123 Long text
stretch</span></a>
<a href="#" class="subNavIt em"><span>lin k 1</span></a>
<a href="#" class="subNavIt em"><span>lin k 1</span></a>
</div>
<div id="navitem3">
<a href="#" class="subNavIt em"><span>lin k 123</span></a>
<a href="#" class="subNavIt em"><span>link3 13 stretch
stretch</span></a>
<a href="#" class="subNavIt em"><span>lin k 13121</span></a>
<a href="#" class="subNavIt em"><span>link1 21</span></a>
</div>
</div>

</body>
</html>

[Els]

Re: CSS Hover Problem in IE

fehays wrote:

Els wrote:

>fehays wrote:
>>

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

>>
>No, this is because of the padding on the <a>.
>The external width of an element is border-left-width + padding-left +
>width + padding-right + border-right-width.
>>

>>But again, I cannot set the
>>width of the <diveither because of the dynamic text. Maybe i'm doing
>>something else wrong??

>>
>When I want the full width of the <aelement *and* have a padding, I
>usually have a <spaninside the <a>:
>>
><div>
><a href=".."><span >link text here</span></a>
></div>
>>
>I then give the <aa width of 100%, and the padding I put on the
><span>, thus not interfering with the width of the <a>.

>
Ah I see. That does help, but I still have a problem with the <atag
expanding across the entire page when it is set to 100%. Could having
absolutely positioned <divtags make a difference? Thanks for your
help. I posted the code below.

<snip code>

Perhaps it's better if you state what you want to accomplish, instead
of pointing out what happens and saying it is a problem?

Of course 100% width will stretch the full width of the page when you
have not set any boundaries on the parent's width. And yes, it is
possible the position:absolu te is interfering, but I can't tell for
sure until I know what the desired result is...


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

[fehays]

Re: CSS Hover Problem in IE


Els wrote:

fehays wrote:
>

Els wrote:

fehays wrote:
>
>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?
>
No, this is because of the padding on the <a>.
The external width of an element is border-left-width + padding-left +
width + padding-right + border-right-width.
>
>But again, I cannot set the
>width of the <diveither because of the dynamic text. Maybe i'm doing
>something else wrong??
>
When I want the full width of the <aelement *and* have a padding, I
usually have a <spaninside the <a>:
>
<div>
<a href=".."><span >link text here</span></a>
</div>
>
I then give the <aa width of 100%, and the padding I put on the
<span>, thus not interfering with the width of the <a>.

Ah I see. That does help, but I still have a problem with the <atag
expanding across the entire page when it is set to 100%. Could having
absolutely positioned <divtags make a difference? Thanks for your
help. I posted the code below.

>
<snip code>
>
Perhaps it's better if you state what you want to accomplish, instead
of pointing out what happens and saying it is a problem?
>
Of course 100% width will stretch the full width of the page when you
have not set any boundaries on the parent's width. And yes, it is
possible the position:absolu te is interfering, but I can't tell for
sure until I know what the desired result is...
>
>
--
Els http://locusmeus.com/
accessible web design: http://locusoptimus.com/

My apologies for not being clear enough. I'll try to better explain
what I want to accomplish. I would like the text inside of my <atags
to determine the width of the parent <div>. In other words, I want the
<divwidth to expand when their is long text. Also, I would like the
<atags that contain shorter text in that same parent to extend to the
full width of that parent <divso that they are the same width as the
<atag with long text. Does this make sense?

[Ben C]

Re: CSS Hover Problem in IE

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

My apologies for not being clear enough. I'll try to better explain
what I want to accomplish. I would like the text inside of my <atags
to determine the width of the parent <div>. In other words, I want the
><divwidth to expand when their is long text.

For that you need the <div>s to be "shrink-to-fit", which they will be
if they're either floats or absolutely positioned (or tables but that's
overkill).

Making them absolutely positioned (but not setting any of the position
properties, top, left etc., so they get their static position) is
probably the easiest.

They weren't shrink-to-fit in your original version though (the one that
worked on Firefox).

If the div is not shrink-to-fit, and the <ais display:block, which I
think it was, then its outside-margin width is 100% of the width of its
container anyway. If you set width:100%, it makes the <a>'s
inside-padding width 100% of the containing width, which was a problem
(and a workaround was suggested).

The width:100% was, as I understood it, a known workaround for an IE
hover bug. Provided you don't get caught out by padding, the actual
widths of everything should end up the same anyway with the width:100%
fix/hack.

>Also, I would like the
><atags that contain shorter text in that same parent to extend to the
full width of that parent <divso that they are the same width as the
><atag with long text. Does this make sense?

That should happen if the parent is shrink-to-fit-- it will use the
preferred width of its contents, which is interpreted as the maximum of
the preferred widths of its child blocks.

Here is an example (no horizontal borders or padding):

<html>
<head>
<title>Test Page</title>
<style type="text/css">
div
{
position: absolute;
}
a
{
display: block;
background-color: gray;
margin-top: 5px;
margin-bottom: 5px;

/*
* Makes no difference to the actual width but might
* help with an IE hover bug
*/
width: 100%;
}
</style>
</head>
<body>
<div>
<a href="#">First link</a>
<a href="#">Second (longer) link</a>
<a href="#">Third link</a>
</div>
</body>
</html>

--
May not work in IE