Images In An Unstructured List (UL) Wont Display Horizontally With IE

I had a little bit of trouble getting the layout of sbhsdonsbaseball.com working with Internet Explorer.

In the image below you will see the photos lined up vertically instead of horizontally as they should be.

sbhs_photo_layout_prob_ie

Here is the original HTML markup for the photo block:

<div class="photoBlock">
<ul>
<li class="even"><a href="" /><img src="images/photoBlock-1.jpg" alt="Photo"/></a></li>
<li class="odd"><a href="" /><img src="images/photoBlock-2.jpg" alt="photo"/></a></li>
<li class="even"><a href="" /><img src="images/photoBlock-3.jpg" alt="photo"/></a></li>
<li class="odd"><a href="" /><img src="images/photoBlock-4.jpg" alt="photo"/></a></li>
<li class="even"><a href="" /><img src="images/photoBlock-5.jpg" alt="photo"/></a></li>
<li class="odd"><img src="images/photoBlock-6.jpg" alt="photo"></img></li>
</ul>
</div>

Here is the original CSS for the photo block:


.photoBlock { overflow: hidden; border-bottom: 3px solid #B69E65;}
.photoBlock ul { overflow: hidden; }
.photoBlock ul li { display:table-cell; height:230px; text-align:center; vertical-align:middle; width:160px;}
.photoBlock ul li.even { background: #000; }
.photoBlock ul li.odd { background: #FFF;}
/* HACK below got rid of background in li */
.photoBlock ul li img {margin: 0 0 -3px 0; }

To get the images to line up horizontally, the HTML markup was simplified:

<div class="photoBlock">
<img src="images/photoBlock-1.jpg" alt="Photo"/>
<img src="images/photoBlock-2.jpg" alt="photo"/>
<img src="images/photoBlock-3.jpg" alt="photo"/>
<img src="images/photoBlock-4.jpg" alt="photo"/>
<img src="images/photoBlock-5.jpg" alt="photo"/>
<img src="images/photoBlock-6.jpg" alt="photo"/>
</div>

We also changed the CSS to support the new markup:

.photoBlock { overflow: hidden; border-bottom: 3px solid #B69E65;}
.photoBlock img{margin:-3px -3px -3px 0;}

For some as of yet unknown reason, images had margin between them, so negative margin was added to the top, right and bottom sides of the images. The result is shown below:

sbhs_photo_layout_good_id

2 Comments »

  1. Сергей Said,

    April 29, 2010 @ 12:43 AM

    Мда.

    С одной стороны сообщение интересное, но с другой очень мало фактических обоснований..< a href=”htt…

  2. Webmaster Said,

    June 10, 2010 @ 10:48 AM

    Hello! Please e-mail me your contacts. I have a question webmaster@bravto.ru” rel=”nofollow”>……

    Thank you!!!…

Leave a Comment