IE8 - When clicking div inside a link nothing happens

Question

When clicking outside the imgcontainer div the link works just fine, but when I click on an image it does not react, on IE10 it works and on Google chrome, but on IE8 it doesnt.

Please find below my CSS code:

.imgcontainer {
  margin: 0 auto;
  width: 75px;
  height: 27px;
}

.imgcontainer img {
  max-width: 75px;
  height: 27px;
}

a {
  display: block;
  height:55px;
  width: 100px;
  margin-top:5px;
  margin-left:10px;
  padding-top:15px;
  text-align: center;
  background-color: #eeeeee;
  border-radius: 5px;
  font-size: 10px;
  font-family: verdana;
  font-weight: bold;
  text-decoration: none;
  color: black;
  border: solid 1px #606060;
  cursor: pointer;
}

And below my html:

<li>
  <ul>
    <a href="http://somelink.com">
      <div class="imgcontainer">
        <img src="img/someimage.png">
      </div>
    </a>
</li>

Can someone please help?

Answer 1

Putting a block element insine an inline element isn't allowed until HTML 5.

In earlier browsers the div element won't end up inside the a element. The browser will end the a element when it encounters the div element, so the image container ends up outside the link.

Use an inline element like a span instead of the div:

<a href="http://somelink.com">
  <span class="imgcontainer">
    <img src="img/someimage.png">
  </span>
</a>

Then style the span to render as a block element (which is ok as you do the same to the a element):

.imgcontainer {
  display: block;
  margin: 0 auto;
  width: 75px;
  height: 27px;
}

Also, the ul and li elements seems to be incorrectly used. The li elements should be inside the ul element. If you have a list inside another (which would explain why there is an ul element inside an li element), then the inner list also has to have li elements.