IE6 does not support the :hover psuedo class on anything except <a href> elements. You can get around this, though, by using a special behavior file (.htc) from Peterned [xs4all.nl]. This is often referred to as hover.htc or csshover.htc.

Alternately, try Suckerfish :hover [htmldog.com].

Milan

I can get it to work on a <a> tag...

You could style your <a> elements to completely fill the DIV:

.link1 a { 
display:block; 
width:100%; 
}

And then use the :hover on the <a> as you say you have done. I would have thought that this was more intuitive for your users, since when the background changes the user would naturally expect they can *click* the link. If you change the background when over the DIV (and not the <a>) they cannot.

As an aside: FF does support the :hover pseudo class on DIV (and other) elements.

Thanks for the replies.

I decided to use what penders said. And everything works great. However, I still have one small problem. I specified the height of my div tags. But I can't seem to center the text vertically within my div tag. I was using a padding-top:10px, and that worked until I added the '.link1 a:hover'. Because now the hover over image doesn't fill the entire div tag (because of the padding-top:10px). I tried 'vertical-align:10px' but that does not seem to work.

Any Suggestions?

I specified the height of my div tags.

Set the height of your <a> tags also, to the same, or maybe 100%? So that the <a> really does fill your DIV.

But I can't seem to center the text vertically within my div tag. I was using a padding-top:10px...

Rather than setting the padding on your DIV tag, set it on your <a> tag instead - that should sort it. Alternatively set

padding-top:0;

and set

line-height:

on your <a> to the same as your height - this works great for vertically centreing a single line of text.

Ok,
I'm having a little trouble on vertically aligning my text. As of now everything works except my text is not vertically centered before the mouse hover's over the link. The text is centered when the mouse hover's over the text.

Below is my CSS and HTML Code:

CSS:

.link1 {
text-align:center;
border: 1px solid #000000;
width:190px;
height:30px;
}

.link1 a {
height:100%;
padding-top:5px;
}

.link1 a:hover {
display:block;
color:#D6BE7E;
width:100%;
background-image:url(/images/brown_bg.gif);
height:25px;
}

////////////////////////////////////

HTML

<div class="link1"><a href="www.mysite.com">Link1</a></div>
<div class="link1"><a href="www.mysite.com">Link2</a></div>
<div class="link1"><a href="www.mysite.com">Link3</a></div>

I'n not sure what you mean about the padding in my <a> tag.

Thanks

The text is centered when the mouse hover's over the text.

The clue is in the question... some of your styling needs to be moved from your "a:hover" pseudo class to the "a" rule:

.link1 a { 
display:block; 
width:100%; 
height:25px; 
padding-top:5px; 
} 
.link1 a:hover { 
color:#D6BE7E; 
background-image:url(/images/brown_bg.gif); 
}

Assuming a height:25px (as opposed to 30px) is OK? Your <a> does not fill your <div>, so there will be a gap of 5px beneath it?

I'n not sure what you mean about the padding in my <a> tag.

You have moved the padding from ".link1" (your <div> tag) to ".link1 a" (your <a> tag) which I would have said is probably the correct thing to do here.

Your <a> does not fill your <div>, so there will be a gap of 5px beneath it?

it should fill,
(content)height + top/bottom padding = actual element height
similarly width
(content)width + left/right padding = actual element width

to be sure no conflicts arise you can remove the height off the div and the <a>'s height and padding will control it too, making it the one place you need to tweak to adjust for your image height..
and yes because of this moving the padding to the <a> element, I would say too, is the right thing to do it's that element which you want to manipulate.

.link1 {
text-align:center;
border: 1px solid #000;
width: 190px;
}

.link1 a {
display:block;
height:25px; /* this + top padding = height for image */
padding-top:5px;
}

.link1 a:hover {
color:#D6BE7E;
background-image:url(/images/brown_bg.gif);
}

[edited by: SuzyUK at 1:28 pm (utc) on Jan. 5, 2007]

"Your <a> does not fill your <div>, so there will be a gap of 5px beneath it?"

it should fill,
(content)height + top/bottom padding = actual element height

Oops, yeah! You're absolutely right, sorry about that!

Thanks everybody I got it to work!

Penders, let me know if you ever need a job reference...I'll vouch for your skills in CSS!