<a href> pushes everything out

[katib]

I've got an image and I'm showing 3 hyperlinks on top of it. This is the code with the 3 hyperlinks.

<div style="border:1px solid black; width:512px;">
<a id="al1" href="#" onmouseover="javascript:ShowPopUp('PopUp1');" onmouseout="javascript:ShowPopUp('PopUp1');">I</a>
<a id="al2" href="#" onmouseover="javascript:ShowPopUp('PopUp2');" onmouseout="javascript:ShowPopUp('PopUp2');">II</a>
<a id="al3" href="#" onmouseover="javascript:ShowPopUp('PopUp3');" onmouseout="javascript:ShowPopUp('PopUp3');">III</a>
<img src="../images/04-03.png" width="512px" height="210px" />
</div>


OnMouseover I'm showing a popup window. It's working fine in IE7. In IE6 however , when i'm hovering over onehyperlink, the other two jump to the right, get get pushed out by quite a lot.
Has anyone experienced this problem? What can I do to fix it?

Thanks

Kati

[netridge]

There are tons of bugs when you use css in IE,

Have you tried setting the padding on your links.

[katib]

no. how do i set padding on the links?

thanks

[netridge]

katib,
email me your css and html so I can take a look at it

contact (AT) netridge.net