Why does this link not work in IE?

Question

Thanks for viewing my question.

I'm new to web development and was hoping someone could clarify why the below HTML does not display properly for me in IE but works in Chrome, Firefox and Safari. The goal is to create clickable divs with an image and title.

In IE the background and h2 in the div are clickable. I have wrapped the <img> in a <a> tag which seems to be working but it feels like a hack.

HTML:

<a href="locations.html">
  <div class="boxSmall">
  <h2>Location</h2>
    <div class ="boxImage">
      <img src="images/ex.jpg" alt="Registered Massage Therapist" height="175px" width="195px"/>
    </div>  
  </div>
</a>

I'd appreciate any clarification on this. You can view the example here.

I looked around and found that block items should be able to be contained in a link in HTML 5. Does IE know that? I want to write standard compliant code but I really want to write code that works.

http://downtownrmt.com/locations.html

Answer 1

Usually adding the following to your a tag will do the trick:

a {
display: block;
position: relative;
}

This tells IE to treak the whole a as a box level, rather than just applying the a link to items within side of it.

Answer 2

You declare your content type as application:xhtml/xml but that's for XML and you aren't serving this as XML. Remove that line. Also, Google will ignore your keywords meta tag. Always remember that IE is the worst browser on the planet by far.

Validate your html for the rest of your errors.

Answer 3

Instead of the posted code I see the following on your example:

<a href="services.html">
    <div class="boxSmall">
        <h2>Services</h2>
        <div class="boxImage">
            <a href="services.html"><img src="images/ex.jpg" alt="Registered Massage Therapist" height="175px" width="195px"/></a>
        </div>
    </div>
</a>

As you already wrote, that's not standards conform HTMl4, but (as discussed in the comments) is valid HTML5. Even though at least Firefox creates quite crazy code out of it. Therefore just take a look at the DOM using FireBug or the inspector.

So let's use:

<a href="services.html">
    <span class="boxSmall">
        <span class="h2">Services</span>
        <span class="boxImage">
            <img src="images/ex.jpg" alt="Registered Massage Therapist" height="175px" width="195px"/>
        </span>
    </span>
</a>

You can use CSS' display property to get blocks again:

boxImage, boxSmall, h2 {
    display: block;
}

Though you might need to set some more styles, since I need to remove h2...

PS: That should finally even work in IE ;)