CSS Clickable Area - Problem in IE

Hi. I’m trying to figure out a problem with a CSS clickable area in IE. The example page is here: http://www.netservicesgroup.com/clickable_area_test.htm

I’m trying to set a specific area within the image to be clickable. It works as expected if the image is a background for the container div, but in this particular instance, I need the image NOT to be a background. It has to be its own page element. It works in Firefox but not in IE. I put a non-breaking space between the link tags so you can see that IE actually places the link in the correct spot, but it doesn’t apply the width and height.

This must be something extremely simple that I’m just overlooking, but I can’t see it. Thanks for any help!

Is the link going to have anything in it? If you give it a background color it will work. IE is registering the width and height.

Unless someone else has a brilliant idea, you could put a transparent gif on the link as a background.

Thanks! The transparent GIF worked. Not the most elegant solution, but it works and I don’t have a better one. :slight_smile: Any idea why my attempt only worked if the image was a background image and not a page element in and of itself? That seems very strange to me, like a bug.

Thanks again.

How strange, a bug in IE! :lol: To be honest, I haven’t a clue. In comparison to understanding the weird behavior of IE, understanding the ways of the opposite sex seems like a breeze. :goof:

Hi, if you put a border around it you can see the width/height are matching.

This is a bug in IE where a background (even a fake) is needed for it to work for it to keep focus.

Create a simple 1px by 1px transparent gif image and place it here

#link
{
	display: block;
	width: 150px;
	[B]background:url(fake.gif) no-repeat -1px -1px;[/B]
	height: 75px;
}

The image doesn’t even have to exist though your server logs would have a missing error request :slight_smile:

Thank you both for your helpful replies. And yes, an IE bug… headline news! Not… :smiley: