I'm having problems making my links work in IE.

When I make the link have display:block in CSS, so that when you put your mouse over any part of the link area it will activate the a:hover behavior, it only works when my mouse is directly over the link text, not the rest of the link space (it's a lefthand navigation item, so I want it to be activated when I put my mouse anywhere in the space.

This works great in Mozilla, Opera, new Netscapes, but not in IE.

Here's my CSS:

color: #fff;
display: block;
background-color: #ccc;
padding: 5px 0px;
}

I seem to remember that you have to give IE links width to get them to hover like this, but when I try adding width 100% the link is a little bit too big in Opera and Mozilla, it extends out of its container.

how do I fix this?
Back to top

Hi Jazzkween, that's a good question, it's a very annoying bug that has still not been fixed in IE, I think it comes from the original IE 4, which had no support for display:block at all for inline elements, and I guess they never really fixed it.

The solution, however, is very easy. Since you only want this to apply to IE browsers, you'll want to use some CSS that exploits another bug in IE, all other browsers ignore this CSS, it's valid, but wrong, but since IE reads it, it works great:

* html body #nav a {
width:100%;
}

also, you don't want to apply that class to the hover, you want to apply it to the basic link description, like this:



That will set the hover width to the full width, but won't add the padding or anything to the link in real Browsers like Opera or Mozilla/Firefox or Safari.

That should do it for you, feel free to ask anything else you might need to know, Erik
Back to top