Question

I have a php script that calls a series of images that display as so:

This is the php code that calls them:

<?php

$query = "SELECT
parent_business_id,
image_url,
alt_tag,
description,
thumb_url,
business
FROM
images
ORDER BY
RAND()
LIMIT
6
";

$result = mysql_query($query, $dbc)
or die (mysql_error($dbc));

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

"<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>";

}

?>

At the moment I am using css3’s nth-child to add margins to the central images:

div.gallery_image_container:nth-child(3n+2){
margin-left:10px;
margin-right:10px;
}

The problem I have is this works great in browsers that support css3 but ie 7 and ie 8 will not and I need a solution. I am thinking that maybe I can do this by adding classes in php. If so which function would I use. Is there an nth-child like selector in php?

Answer 1

As Andy mentioned in the comments you can find out to which elements you have to add a class with PHP. All you need is a modulo division.

A pure CSS-Solution requires you to improve your HTML. It is obviously a list of images, therefore: Use a list. The resulting HTML should look something like this:

<ul class="gallery_container">
    <li>
        <a href='business-profile.php?business_id=$parent' class='gallery_darken'><img src='$mainthumb' alt='$alt' title='$description' /></a>
    </li>
    <li>
        <a href='business-profile.php?business_id=$parent' class='gallery_darken'><img src='$mainthumb' alt='$alt' title='$description' /></a>
    </li>
    <li>
        <a href='business-profile.php?business_id=$parent' class='gallery_darken'><img src='$mainthumb' alt='$alt' title='$description' /></a>
    </li>
    […]
</ul>

In the CSS now remove your :nth-child rule and instead add the following two rules:

.gallery_container {
    margin: 0 0 0 -20px;
    padding: 0;
    list-style: none;
}
.gallery_container > li {
    margin: 0 0 0 20px;
    padding: 0;
    float: left;
}