CODEWITHSUNDEEP
htmlinternet-explorer-7
tinny
tinny

Reputation: 4257

div wrapped with link not appearing as clickable in IE 7

I have the following code

<a href="http://google.com">
    <div style="float:left;">
        Test
    </div>
    <div style="float:left;">
        testing
    </div>
</a>

The link works correctly (clicking anywhere in the div navigates to the link) but in IE7 the div doesn't appear to be clickable. When hovering over the div the cursor does not change to a hand.

The hover works as excepted in IE8, Firefox, chrome

My guess is that there is the usual ugly IE hack for this :-(

Upvotes: 2

Views: 4226

Answers (3)

clairesuzy
clairesuzy

Reputation: 27624

a {
  display: block;
  background: #eee; 
  overflow: hidden; 
  cursor: pointer;
}

the link still works, even without the pointer changing, however IE7 does like it better if hasLayout is set to to true (overflow:hidden; which also contains the floats in other browsers), and then just tell it to have the right cursor.. it needs help ;)

Upvotes: 4

RobertO
RobertO

Reputation: 2663

href cannot be ...... or empty

edit:

try:

a
{
   display: inline-block;
}

Upvotes: 0

Yule
Yule

Reputation: 9754

This should work unless you've got some extra markup: http://jsfiddle.net/Cd4PK/

However this is bad markup. You should not have block elements (divs) within inline elements (a). Try using a span?

Upvotes: 1

Related Questions