IE Issue With Showing Image On Hover

Roo posted this at 20:06 — 19th August 2006.

Joined: Apr 1999

Here's the css:

a:hover {
color: #4746B5;
font-weight: bold;
text-decoration: none;
background-image: url("hover.gif");
background-position: right;
background-repeat: no-repeat;
display: block;
}

The image displays properly in Firefox and Opera, but in IE the image is covered up by the text in some links.

XHTML transitional and CSS are valid.

The menu is in a table cell. (yes I still use tables and use css to control them )

Anyway....is this an IE bug or could it be a table thing with IE?

Roo

demonhale posted this at 04:24 — 20th August 2006.

He has: 3,278 posts

Joined: May 2005

can you provide the link so i can see what you mean?

Roo posted this at 05:55 — 20th August 2006.

She has: 840 posts

Joined: Apr 1999

I fixed it by making the font size smaller...link text is long for some links...

Anyway....now I've found another IE bug (and the solution, but it doesn't help me)

Okay:
When using a ul for a menu, and also using a background image on hover, and having display: block; set in the a hover class, when you hover the image shows in IE, but the list menu jumps and a big gap appears below each link while you are hovered on it.

This goes away when you remove display: block; from the css BUT, the only way the on hover image shows correctly in Firefox, and Opera is WITH the display: block; in the CSS.

I HATE that &&&&(##$%^@@@@ browser!!!

Ignore the inflated CSS, I have to clean it up and add some things yet, but this is what I'm working on.

Roo

Renegade posted this at 19:57 — 20th August 2006.

He has: 3,022 posts

Joined: Oct 2002

Roo, yes, that is a pretty annoying "bug" in IE but I found that to fix it, you have to put a border-bottom on the li (or is it the a) usually fixes the problem. Even more annoying is that, it will only fix itself if border-bottom is used. Nothing else like border-left, right or top