Making the whole div a clickable link

[Solarus]

I wanted to create a box that you could click on and be forwarded to "#" so I thought this would be a good idea:

<a href="#">
<div style=" width: 200px; height: 200px; background-color: #202020; "></div>
</a>

It works perfectly in both Opera and FireFox but Iexplore won't consider the box as a something "clickable".
Is there a way to trick iexplore to think that the box is a link?
other tags than <div> would work just as fine.

Also I want to add a areamap in the box so that the link only would be clickable when the cursor is in that certain area. Something like:

<map name="map">
<area shape="rect" href="#" coords="20,20,180,180">
</map>
<div usemap="#map" style=" width: 200px; height: 200px; background-color: #202020; "></div>

But unfortuneatly areamaps couldn't be used in div or p tags :/
Anyone have an idea what a good solution would be?

[kaled]

Instead of a div you could try <span style="display:block">. It might work.

Kaled.

[jo1ene]

Style the a elment itself and set it to display block:

a {
display: block;
width: 200;
hight: 200;
etc...
}

[encyclo]

Placing a

div

inside of a link will cause your page to fail validation: a

div

is a block-level element whereas an anchor is inline.

As jo1ene suggests, you could try to place the styles on the anchor itself, including a

display:block;

- however, you would have no content inside your anchor. Assuming that you want the area to be blank apart from the background color, my first thought would be to use a stretched 1x1 pixel transparent GIF:

<a href="#"><img src="transparent.gif" style="background-color:#202020;" width="200" height="200" alt="Click to return to the index page"></a>

You could also use a 1x1 pixel GIF of the appropriate background color and leave out the CSS declaration on the

img

tag. The advantage of using an image is that there would be the alternate text for accessibility purposes. Of course, you can use an image map on the

img

tag too.

Don't forget to run your page through the HTML validator [validator.w3.org], which will help you better identify errors such as that with your original example. :)

[Solarus]

Neither of those ideas would solve my problem. It's a bit more complicated than that. I'll try to explian :)

Why I have to use <div> or similar tags is because the picture I want to use is a .png with alpha transparency. As you may or may not know .gif don't support alpha transparency it just support transparent on/off. Also most browsers today support the .png type images except of Internet Explorer (arrr).
But there is a way to trick iexplode to support .png:
By creating a div with the size of the picture and defining the .png picture as the background of the div.

<div style=" width: 129px; height: 25px;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (src='picture.png',sizingMethod='scale'); "></div>

But iexplode is the only browser in the world to support the "filter : progid:DX....." thing so i use a special .css for iexplode and another css for all other browsers.
Something like (more code but didn't have time to write it out):

<script language="javascript">

if ((browser.isIE55 ¦¦ browser.isIE6up) && browser.isWin32) {
document.write('<link rel="stylesheet" href="is-is-teh-suxx.css" type="text/css">');
}
else
{
document.write('<link rel="stylesheet" href="style.css" type="text/css">');
}

</script>

Now that was enough for <td> backgrounds but i wanted some links also in .png so the
<a href="#"><div class="something"></div></a>
solved the problem in opera and FireFox but iexplore didn't consider the div tag as a link.

Now is there another way to make iexplode consider the div field as a link or can you make iexplore fully support .png images in a <img> tag?