Webmaster Forum / HTML, CSS, Scripts / CSS / June 2007

Hi,

I have a hyperlink styled to look like a button, which can also
contain an image, before the text. The link works in FF, but in IE
clicking the img doesn't trigger the link. Clicking the text in the
same span does.

If I move the img outside the span then it works. Is this a known
issue, and if so, is there a workaround? I've tied using different
types of tags to contain the image, but none of them made any
difference.

HTML:

<a class="btn" href="javascript:document.forms[0].submit();">
    <span><img src="images/checkmark.gif" alt="" />ok</span></a>

CSS:

.btn
{
    background:url(images/button/btn-std-l.gif) no-repeat left top;
    display:inline-block !important; /* for IE7, FF */
    line-height:22px;
    padding:0px 0px 0px 6px;
    text-decoration:none;
    cursor:hand; /* remind IE this is a link */
}
.btn span
{
    background:url(/Cornerstone-6.6/images/button/btn-std-r.gif) no-
repeat right top;
    display:inline-block !important;
    height:22px;
    line-height:22px;
    padding:0px 6px 0px 0px;
    font-size:10pt;
}

.btn img
{
    border:none;
    vertical-align:middle;
}

Thanks,

Aleko