Sunday, 15 June 2014

php - How to handle nth-child for internet explorer 8 -



php - How to handle nth-child for internet explorer 8 -

i have php script calls series of images display so:

this php code calls them:

<?php $query = "select parent_business_id, image_url, alt_tag, description, thumb_url, business images order 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 moment using css3's nth-child add together margins central images:

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

the problem have works great in browsers back upwards css3 ie 7 , ie 8 not , need solution. thinking maybe can adding classes in php. if function use. there nth-child selector in php?

as andy mentioned in comments can find out elements have add together class php. need modulo division.

a pure css-solution requires improve html. list of images, therefore: utilize list. resulting html should 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 css remove :nth-child rule , instead add together next 2 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; }

php css internet-explorer css-selectors

No comments:

Post a Comment