Using div as a transparent button

This code works fine, but it's not quite what I want:

Code:

---

<div 
style="position: absolute;
      height: 200px;
          width: 200px;
          top: 100px;
          left: 100px;
          background: pink;"
onMouseOver="this.style.border='thin outset'; alert('in');"
onMouseOut="this.style.border='none';">

</div>

---

What I want is to be able to remove the background: pink; so that the div lets the background show through so that I've got a transparent button whose outline is apparent on rollover. However, when I remove it, it stops working completely--even the alert stops happening. I tried setting background: transparent; and the same thing happens.

I'm using IE 5.5.

cudabean

I figured it out!

The trick is to put something big, something that preferably takes up the entire div realestate between the div tags.

I put a tiny single pixel gif (43 bytes) with a transparent background in there and I scaled it up to 200px X 200px like this:

<div .....>
<img source="dotclear.gif" width=200 height=200>
</div>

And that's all there is to it. If you want to try this and don't have a dotclear.gif, try doing a find on dotclear.gif. I bet you have a bunch of them hidden away on your drive in your temporary internet files folder.

cudabean

If you need to put something in the div, why not just another empty div or span? You shoud never ever, under any curcimstances, have to use clear images as place holders.

why that is like aligning in tables, sometimes you need a clear image to make thing come out just right. but if you think the other way I can see what you are talking about.