6

Work on the following website: http://cetcolor.com

The masthead graphic with the "Read About It" button has a positioned link with hover that when rolled over displays an orange button graphic and is a clickable link.

However, in IE browsers it's not working.

Here is the affected HTML:

<div id="header"> <a href="/" title="CET Color"><img src="images/logo.gif" width="147" height="86" alt="CET Color" class="logo"></a> <span class="strapline">Affordable Large-format UV Printing Solutions</span> <a href="/pressroom_article8" class="read_about_it"></a> </div>

And here is the referenced CSS:

#header .read_about_it { position: absolute; top: 239px; left: 803px; z-index: 100; width: 114px; height: 17px; } #header .read_about_it:hover { background-image: url(/images/masthead_index_read_about_i.jpg); background-repeat: no-repeat; cursor: pointer; z-index: 101; }

Does anyone have any idea why the hover isn't working in IE browsers?

Improve this question
2
  • 1
    One cause could be that you have an empty link. Try inserting some text in it and do text-indent:-9999px to move it out. Commented Mar 22, 2012 at 16:18
  • I think you're right that the issue deals with the link being empty. When I add content to the link, it works. When I add the text-indent to the first declaration above, it stops working. Not sure what to do with that... Commented Mar 22, 2012 at 19:34

4 Answers 4

Reset to default
9

I have a solution for you. Just define a background-color or background-image for your read_about_it class.

There is obvious logical mistake in your CSS code/or in IE - depends on the viewpoint. Your A tag is empty - I do not mean text but background (you change background on your hover state). We all know IE lives in its own world and handles HTML in different way cause it uses the ancient Trident engine. However IE will not change background on hover state if element is empty (has no background) because IE assumes that there is no need changing or creating something that does not already exist.
Cheers!

Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

I was able to get this working by adding a transparent gif to the background. Thank you so much.
You're welcome! It is a pretty good idea to use transperant gif.
4

Add "display: block;" to it, and it should work for you.

#header .read_about_it { display: block; position: absolute; top: 239px; left: 803px; z-index: 100; width: 114px; height: 17px; }
Improve this answer

1 Comment

I tried this but it didn't work. Is this mode specific - standard, loose?
3

I've have the same problem and I've solve this problem with:

#header .read_about_it { display: block; background: rgba(255, 255, 255, 0); position: absolute; top: 239px; left: 803px; z-index: 100; width: 114px; height: 17px; }

The "background: rgba(255, 255, 255, 0)" is a keyword to solve this problem. But you want to IE-7 OR older you can put background-image: url(URL_TO_TRANSPARENT_IMAGE).

Improve this answer

Comments

1

If you are using IE6 it does not support :hover on any elements except 

<a>

I have gotten around it by using javascript

onmouseover onmouseout

events.

Improve this answer

1 Comment

Not true. IE supports :hover on all elements. IE6 does not support :hover on any element except on <a> tag. All versions higher that IE6 support :hover nicely.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.