CSS Hover Problem in IE

**Els** · Oct 10 '06, 03:55 PM

Re: CSS Hover Problem in IE

fehays wrote:

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?

It makes sense, but I don't think it can be done.

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

**fehays** · Oct 10 '06, 04:05 PM

Re: CSS Hover Problem in IE

Ben C wrote:

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

Thanks Ben. You're right, setting the width to 100% on the <adoes
fix the original hover problem. Now my problem is figuring out how to
not make the <atag not stretch across the page in IE when the width
is set to 100%. As Els mentioned, not setting the parent <divwidth
is causing this, however, it does work fine in Firefox.

**fehays** · Oct 10 '06, 05:25 PM

Re: CSS Hover Problem in IE

Els wrote:

fehays wrote:
>

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?

>
It makes sense, but I don't think it can be done.
>
--
Els http://locusmeus.com/
accessible web design: http://locusoptimus.com/

Many thanks to all for the help. 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.

<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;
}
span
{
display:block;
float:left;
}
</style>
</head>
<body>
<div>
<a href="#">First link</a>
<a href="#">Second (longer) link</a>
<a href="#">Third link</a>
<span></span>
</div>
</body>
</html>

**Ben C** · Oct 10 '06, 05:35 PM

Re: CSS Hover Problem in IE

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

Many thanks to all for the help. The code below solved it, but I'm not
sure why

Who can say? Especially without the IE source code.

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.

The span should harmlessly make no difference in standards-conforming
browsers. You don't need to set it to display:block if it's float:left
(unless that's part of the magic that makes IE work).

Good fix, looks like one to add to the "obscure IE workarounds" list!

><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;
}
span
{
display:block;
float:left;
}
</style>
</head>
<body>
<div>
<a href="#">First link</a>
<a href="#">Second (longer) link</a>
<a href="#">Third link</a>
<span></span>
</div>
</body>
></html>
>

**boclair** · Oct 11 '06, 02:05 AM

Re: CSS Hover Problem in IE

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.
>
<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;
}
span
{
display:block;
float:left;
}
</style>
</head>
<body>
<div>
<a href="#">First link</a>
<a href="#">Second (longer) link</a>
<a href="#">Third link</a>
<span></span>
</div>
</body>
</html>
>

Try that without the span.

As to why the position absolute rule on the div selector results in the
width being controlled by the width of the content see

Visual formatting model details

http://www.w3.org/TR/REC-CSS2/visudet.html#abs-non-replaced-width

(Recently pointed out to me on this list)

Louise

**Els** · Oct 11 '06, 05:35 AM

Re: CSS Hover Problem in IE

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** · Oct 11 '06, 10:25 AM

Re: CSS Hover Problem in IE

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** · Oct 11 '06, 11:35 AM

Re: CSS Hover Problem in IE

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** · Oct 11 '06, 11:25 PM

Re: CSS Hover Problem in IE

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** · Oct 12 '06, 06:25 AM

Re: CSS Hover Problem in IE

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/

CSS Hover Problem in IE

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment