How to make caption display underneath film strip images in Internet Explorer?

[peter171]

I found a script from Mark Brown on here that he posted in February 2007 to display images in a horizontal filmstrip.

This was just what I was looking for and I’ve adopted it, though with added captions to be displayed beneath each image. This works fine in Firefox, Safari, Chrome and Opera but not in Internet Explorer where the caption shows alongside the image, not beneath it.

It doesn’t matter whether the < br /> is before or inside the span comment, the caption in IE is always alongside the image. How can I adjust this so that the caption shows beneath the image in IE?

Code is:

#film_strip li {
  float: left
}
#film_strip li img {
  float: left;
  background: #EFEFEF;
  padding: 5px;
  margin: 5px;
  border: 1px solid #AAA;
}

< ul id="film_strip">
  < li>< img src="image1" width="50" height="50" alt="" />< br />caption 1< /li>
  < li>< img src="image2" width="50" height="50" alt="" />< br />caption 2< /li>
  < li>< img src="image3" width="50" height="50" alt="" />< br />caption 3< /li>
< /ul>


<ul id="film_strip">
  <li><img src="image1" width="50" height="50" alt="" /><br />caption 1</li>
</ul>

etc.
(Only one line shown as I’m not allowed more than one image in this post)

[peter171]

All sorted thanks to Mark Brown!

The float: left; needed changing to display: block; in #film_strip li img