CODEWITHSUNDEEP
htmlcsspositioningcss-position
Flipke
Flipke

Reputation: 971

Text-decoration underline not working after position absolute

http://jsfiddle.net/ZPNxh/2/

When I position the overlayer absolutely, the hover (underline) on the h3 doesn't work (although the A tag wraps everything).

When it's normally positionned, the underline works like a charm.

I tried playing with the z-indexes, in vain

Any ideas ?

Upvotes: 1

Views: 2213

Answers (1)

Praveen Kumar Purushothaman
Praveen Kumar Purushothaman

Reputation: 167182

First off, a tag is an inline element and h3 tag is a block element! You cannot place the h3 tag inside the a tag. So, first remove the a tag and make it as some other block level element like a div.

The :hover pseudo class doesn't work on IE 6 other than for a tag. So, if you are using the div tag and targetting it as div:hover, that works in all browsers, except those less than IE 7.

Still, if you wanna use the same markup, please add this:

a {display: block;}

So that, it renders it as a block element, rather than inline element, holding the h3 and div!

Preview

enter image description here

And one another best way is to add border-bottom: 2px solid; instead of text-decoration!

Upvotes: 2

Related Questions