IE does not comply: hover over an element

Question

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

The graphical pointer with the "Read about this" button has a link with a hang that, when minimized, displays an orange graphic and is a clickable link.

However, in IE browsers it does not work.

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 CSS link:

 #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 know why the hang does not work in IE browsers?

Answer 1

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

There is an obvious logical error in CSS / or in IE - it depends on the point of view. Your tag A is empty - I do not mean the text, but the background (you change the background in a freeze state). We all know that IE lives in its own world and treats HTML differently because it uses the old Trident engine. However, IE will not change the background when it hangs if the element is empty (has no background), because IE assumes that there is no need to change or create something that does not exist.
Hurrah!

Answer 2

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

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

Answer 3

I have the same problem and I solved this problem:

 #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; } 

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

Answer 4

If you use IE6, it does not support: hover over any items except

 <a> 

I went around it using javascript

 onmouseover onmouseout 

events.