By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
424,950 Members | 1,032 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 424,950 IT Pros & Developers. It's quick & easy.

CSS Hover Problem in IE

P: n/a
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:hover
{
color:#00A5E5;
text-decoration:none;
background-color:#F5F8F4;
}

Here is the HTML:

<div style="width:400px">
<a href="dir" class="subNavItem">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?

Oct 6 '06 #1
Share this Question
Share on Google+
24 Replies


P: n/a

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

Oct 6 '06 #2

P: n/a


On Oct 6, 4:35 pm, "Andy Dingley" <ding...@codesmiths.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="subNavItem">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.

Oct 6 '06 #3

P: n/a
Els
fehays wrote:
On Oct 6, 4:35 pm, "Andy Dingley" <ding...@codesmiths.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="subNavItem">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
Oct 6 '06 #4

P: n/a
On 2006-10-06, fehays <fe****@gmail.comwrote:
[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.
Oct 7 '06 #5

P: n/a
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 - Kauwgomballenboom
Oct 7 '06 #6

P: n/a
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
Oct 7 '06 #7

P: n/a


On Oct 7, 1:48 am, Ben C <spams...@spam.eggswrote:
On 2006-10-06, fehays <feh...@gmail.comwrote:
[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

Oct 9 '06 #8

P: n/a
Els
fehays wrote:
On Oct 7, 1:48 am, Ben C <spams...@spam.eggswrote:
>On 2006-10-06, fehays <feh...@gmail.comwrote:
[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/
Oct 9 '06 #9

P: n/a

Els wrote:
fehays wrote:
On Oct 7, 1:48 am, Ben C <spams...@spam.eggswrote:
On 2006-10-06, fehays <feh...@gmail.comwrote:
[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??

Oct 9 '06 #10

P: n/a
Els
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/
Oct 9 '06 #11

P: n/a

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:hover
{
color:#00A5E5;
text-decoration:none;
background-color:#F5F8F4;
}

#navitem1
{

position:absolute;
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:absolute;
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:absolute;
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="subNavItem"><span>link 1 stretch
stretchy</span></a>
<a href="#" class="subNavItem"><span>link13</span></a>
<a href="#" class="subNavItem"><span>link2</span></a>
</div>
<div id="navitem2">
<a href="#" class="subNavItem"><span>link 2</span></a>
<a href="#" class="subNavItem"><span>link 123 Long text
stretch</span></a>
<a href="#" class="subNavItem"><span>link 1</span></a>
<a href="#" class="subNavItem"><span>link 1</span></a>
</div>
<div id="navitem3">
<a href="#" class="subNavItem"><span>link 123</span></a>
<a href="#" class="subNavItem"><span>link313 stretch
stretch</span></a>
<a href="#" class="subNavItem"><span>link 13121</span></a>
<a href="#" class="subNavItem"><span>link121</span></a>
</div>
</div>

</body>
</html>

Oct 9 '06 #12

P: n/a
Els
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:absolute 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/
Oct 10 '06 #13

P: n/a

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

Oct 10 '06 #14

P: n/a
On 2006-10-10, fehays <fe****@gmail.comwrote:
[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
Oct 10 '06 #15

P: n/a
Els
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/
Oct 10 '06 #16

P: n/a

Ben C wrote:
On 2006-10-10, fehays <fe****@gmail.comwrote:
[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.

Oct 10 '06 #17

P: n/a
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
<spandisplayed 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>

Oct 10 '06 #18

P: n/a
On 2006-10-10, fehays <fe****@gmail.comwrote:
[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
<spandisplayed 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>
Oct 10 '06 #19

P: n/a
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
<spandisplayed 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
http://www.w3.org/TR/REC-CSS2/visude...replaced-width

(Recently pointed out to me on this list)

Louise
Oct 11 '06 #20

P: n/a
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
<spandisplayed 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 "superfluous" 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/
Oct 11 '06 #21

P: n/a
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
<spandisplayed 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 "superfluous" 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

Oct 11 '06 #22

P: n/a
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
<spandisplayed 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 "superfluous" 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/
Oct 11 '06 #23

P: n/a
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
<spandisplayed 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 "superfluous" 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
Oct 11 '06 #24

P: n/a
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
><spandisplayed 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 "superfluous" 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/
Oct 12 '06 #25

This discussion thread is closed

Replies have been disabled for this discussion.