Home/ Questions/Q 7986087
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-04T11:44:54+00:00

The following code makes an entire div linkable to the <a> tag within with

  • 0

The following code makes an entire div linkable to the <a> tag within with some cute css. It works for all browsers but IE7 (and probably 6). In IE7 the #go span seems to be covering up the link. The rest of the div is linked except for the span element, which acts like any normal part of the page. I’ve tried changing the z-indexes, and displaying the span as block (as you can see). A last resort would be wrapping the span with an additional <a> tag but that is just gross…does anybody have any better solutions?

.orangebutton {
    position: relative; 
}
.orangebutton a {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}

<div class="orangebutton floatright" id="home-go-button4">
    <span id="go" style="display: block">Go</span>
    <a href="http://google.com"></a>
</div>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    This is a bug of the IE ( Empty div hover event not firing in IE )

    Solution would be to set a background for the a tag, but since you need it to be transparent, just add a transparent background image..

    demo at http://jsfiddle.net/3m93n/1/
    (transparent image hotlinked from the internet.. create a local version..)

    • 0