CSS - Image Caption Box Not Working Correctly In IE9

Question

I have an image with a caption box it works fine in all the other browsers apart from Internet Explorer 9 and I'm not sure why? and how can I fix it? the images and captions overlap each other and the text go behind the image.

I have posted the code and also a demo JSFiddle.

.caption-box {
  width: 100%;
  height: auto;
  display: inline;
}
.caption-box .imageHolder {
  display: inline-block;
  width: auto;
  margin: 0 auto;
  margin-bottom: 5px;
}
.imageHolder {
  position: relative;
  width: 220px;
  height: 150px;
  border: 3px solid #ddd;
}
.imageHolder:hover {
  opacity: 0.9;
  border: 3px solid #333;
}
.imageHolder img {
  width: 220px;
  height: 150px;
}
.imageHolder .caption {
  position: absolute;
  width: 220px;
  height: 27px;
  bottom: 0px;
  left: 0px;
  color: #ffffff;
  background: #333;
  text-align: center;
  opacity: 0.7;
  padding-top: 15px;
}
.imageHolder .caption a:visited,
a:link {
  color: #fff;
  text-decoration: none;
}
.imageHolder .caption a:hover {
  color: #fff;
  text-decoration: underline;
}

<div class="caption-box">
  <a href="#">
    <div class="imageHolder">
      <img src="http://lorempixel.com/output/animals-q-c-640-480-7.jpg" />
      <div class="caption"><a href="#">Title</a>
      </div>
    </div>
  </a>
  <a href="#">
    <div class="imageHolder">
      <img src="http://lorempixel.com/output/animals-q-c-640-480-7.jpg" />
      <div class="caption"><a href="#">Title</a>
      </div>
    </div>
  </a>
  <a href="#">
    <div class="imageHolder">
      <img src="http://lorempixel.com/output/animals-q-c-640-480-7.jpg" />
      <div class="caption"><a href="#">Title</a>
      </div>
    </div>
  </a>
  <a href="#">
    <div class="imageHolder">
      <img src="http://lorempixel.com/output/animals-q-c-640-480-7.jpg" />
      <div class="caption"><a href="#">Title</a>
      </div>
    </div>
  </a>
  <a href="#">
    <div class="imageHolder">
      <img src="http://lorempixel.com/output/animals-q-c-640-480-7.jpg" />
      <div class="caption"><a href="#">Title</a>
      </div>
    </div>
  </a>
  <a href="#">
    <div class="imageHolder">
      <img src="http://lorempixel.com/output/animals-q-c-640-480-7.jpg" />
      <div class="caption"><a href="#">Title</a>
      </div>
    </div>
  </a>
</div>

"Not Working" doesn't explain the functionality that you are looking for. — dowomenfart, Apr 15 '15 at 13:15
Sorry I have updated the question and I will upload some screenshots. — jonathanl5660, Apr 15 '15 at 13:20

score 2 · Accepted Answer · edited Jun 20 '20 at 09:12

You are putting div inside an anchor element. It is a rendering error: in fact IE9 does not allow to use block element inside a inline element, as for HTML4 specs.

See this answer.

HTML 4.01 specifies that <a> elements may only contain inline elements. A <div> is a block element, so it may not appear inside an <a>.

Of course you are at liberty to style an inline element such that it appears to be a block, or indeed style a block so that it is rendered inline. The use of the terms inline and block in HTML refers to the relationship of the elements to the semantic structure of the document, whereas the same terms in CSS are related more to the visual styling of the elements. If you make inline elements display in a blocky manner, that's fine.

However you should ensure that the structure of the document still makes sense when CSS is not present, for example when accessed via an assistive technology such as a screen reader - or indeed when examined by the mighty Googlebot."

Here is how IE9 sees your code:

enter image description here

Thank you, I just moved the anchor and that corrected my problem. — jonathanl5660, Apr 15 '15 at 13:38

CSS - Image Caption Box Not Working Correctly In IE9

1 Answers1