Question

I have an image gallery that is dynamically loaded with php. In chrome it looks like so:

In ie8 it looks like so:

The HTML and PHP is as follows:

while($row = mysql_fetch_array($result)) {

$parent = $row["parent_business_id"];
$image = $row["image_url"];
$alt = $row["alt_tag"];
$description = $row["description"];
$thumb = $row["thumb_url"];
$business = $row["business"];

$mainthumb = "./images/270x270/$image.jpg";

echo

"<li>

<div class='gallery_image_container'>

<a href='business-profile.php?business_id=$parent' class='gallery_darken'><img src='$mainthumb' alt='$alt' title='$description' /></a>

</div>

</li>";

}

?>

And the CSS is like so:

.gallery_container {
margin: 0 0 0 -10px;
padding: 0;
list-style: none;
}

.gallery_container > li {
margin: 0 0 0 10px;
padding: 0;
float: left;
display:inline;
}

div.gallery_image_container{
width:270px;
height:270px;
padding:20px;
margin-bottom:10px;
background-color:white;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: rgba(0,0,0,.2) 0px 0px 6px;
-moz-box-shadow:  rgba(0,0,0,.2) 0px 0px 6px;
box-shadow:  rgba(0,0,0,.2) 0px 0px 6px;
float:left;
display:block;
}

a.gallery_darken {
display: block;
background: black;
padding: 0;
width:270px;
height:270px;
float:left;
}

a.gallery_darken img {
display: block;
-webkit-transition: all 0.5s linear;
-moz-transition: all 0.5s linear;
-ms-transition: all 0.5s linear;
-o-transition: all 0.5s linear;
transition: all 0.5s linear;
}

a.gallery_darken:hover img {
opacity: 0.7;
}

I’m uncomfortable about using divs within li items but am unsure of what other methods I can use to add the borders and shadows so it may be that this is the root of the problem. I would essentially like the gallery to look the same in ie8 as it does in chrome but having tried adding float:left and display:inline to the containing divs and images I am at a loss as to why the images will not line up in ie8. Any help would be much appreciated.

Answer 1

Based on what you want to see, I think you are floating too much. Only use floats when you need to, and make sure to clear them afterwards. Try this:

HTML:

<ul class="image-gallery">   
    <li>
        <a href="#" title="Click me!"><img src="somesource.png" alt="Description" /></a>   
    </li>

  <!-- repeat for each image -->

    <li>
        <a href="#" title="Click me!"><img src="somesource.png" alt="Description" /></a>
    </li> 
</ul>

CSS:

ul.image-gallery { 
  list-style: none; 
  margin: 0; 
  padding: 0; 
  overflow: hidden; /* clear floats */
}
ul.image-gallery li {
  width:270px;
  height:270px;
  float:left;
  padding:20px;
  margin: 0 10px 10px 0;
  background: #ffffff;
  border-radius: 3px;
  box-shadow:  rgba(0,0,0,.2) 0px 0px 6px;
}
ul.image-gallery a {
  display: block;
  transition: all 0.5s linear;
}
ul.image-gallery a:hover {
  opacity: 0.7;
}