I have a table that displays pictures in each td element. The page is essentially a gallery.
In Firefox, there is a SMALL(5px) margin (or padding?) around each picture inside the td element. No matter how many pictures in the table the margin never changes. All that is great & what I want.
In IE, there is a LARGE(40px) margin (or padding?) around each picture inside the td element. When there are more pictures in the table the margin/padding is greater. This is not what I want
In both scenarios, each picture is the same size about (100px by 100px) which is what I want.
How can I make sure that IE does not have these weird margins around each picture? And just maintain the constant 5px margin around each picture?
My code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Kaz Early Learning Centre - Local Childcare - Dolans Bay NSW</title>
<style type="text/css" media="all">
</style>
</head>
<body>
<div id="gallery" align="center">
<table align="center">
<tr> </tr>
<tr>
<td>
<a href="/cgi-bin/showPicture.py?picPath=images/gallery/Open Day 2010/IMG_0215_resized.JPG">
<img src="images/gallery/Open Day 2010/IMG_0215_resized.JPG" class="pic" style="max-width: 100px; width: expression(this.width > 100 ? 100: true); max-height: 200px; height: expression(this.height > 200 ? 200: true);" />
</a>
</td>
<td>
<a href="/cgi-bin/showPicture.py?picPath=images/gallery/Open Day 2010/IMG_2262_resized.JPG">
<img src="images/gallery/Open Day 2010/IMG_2262_resized.JPG" class="pic" style="max-width: 100px; width: expression(this.width > 100 ? 100: true); max-height: 200px; height: expression(this.height > 200 ? 200: true);" />
</a>
</td>
<td>
<a href="/cgi-bin/showPicture.py?picPath=images/gallery/Open Day 2010/IMG_0223_resized.JPG">
<img src="images/gallery/Open Day 2010/IMG_0223_resized.JPG" class="pic" style="max-width: 100px; width: expression(this.width > 100 ? 100: true); max-height: 200px; height: expression(this.height > 200 ? 200: true);" />
</a>
</td>
</tr>
<tr>
<td>
<a href="/cgi-bin/showPicture.py?picPath=images/gallery/Open Day 2010/IMG_0196_resized.JPG">
<img src="images/gallery/Open Day 2010/IMG_0196_resized.JPG" class="pic" style="max-width: 100px; width: expression(this.width > 100 ? 100: true); max-height: 200px; height: expression(this.height > 200 ? 200: true);" />
</a>
</td>
<td>
<a href="/cgi-bin/showPicture.py?picPath=images/gallery/Open Day 2010/IMG_0223_resized.JPG">
<img src="images/gallery/Open Day 2010/IMG_0223_resized.JPG" class="pic" style="max-width: 100px; width: expression(this.width > 100 ? 100: true); max-height: 200px; height: expression(this.height > 200 ? 200: true);" />
</a>
</td>
<td>
<a href="/cgi-bin/showPicture.py?picPath=images/gallery/Open Day 2010/IMG_0220_resized.JPG">
<img src="images/gallery/Open Day 2010/IMG_0220_resized.JPG" class="pic" style="max-width: 100px; width: expression(this.width > 100 ? 100: true); max-height: 200px; height: expression(this.height > 200 ? 200: true);" />
</a>
</td>
</tr>
<tr>
<td>
<a href="/cgi-bin/showPicture.py?picPath=images/gallery/Open Day 2010/IMG_0196_resized.JPG">
<img src="images/gallery/Open Day 2010/IMG_0196_resized.JPG" class="pic" style="max-width: 100px; width: expression(this.width > 100 ? 100: true); max-height: 200px; height: expression(this.height > 200 ? 200: true);" />
</a>
</td>
<td>
<a href="/cgi-bin/showPicture.py?picPath=images/gallery/Open Day 2010/IMG_0223_resized.JPG">
<img src="images/gallery/Open Day 2010/IMG_0223_resized.JPG" class="pic" style="max-width: 100px; width: expression(this.width > 100 ? 100: true); max-height: 200px; height: expression(this.height > 200 ? 200: true);" />
</a>
</td>
<td>
<a href="/cgi-bin/showPicture.py?picPath=images/gallery/Open Day 2010/IMG_0220_resized.JPG">
<img src="images/gallery/Open Day 2010/IMG_0220_resized.JPG" class="pic" style="max-width: 100px; width: expression(this.width > 100 ? 100: true); max-height: 200px; height: expression(this.height > 200 ? 200: true);" />
</a>
</td>
</tr>
<tr>
<td>
<a href="/cgi-bin/showPicture.py?picPath=images/gallery/Open Day 2010/IMG_0196_resized.JPG">
<img src="images/gallery/Open Day 2010/IMG_0196_resized.JPG" class="pic" style="max-width: 100px; width: expression(this.width > 100 ? 100: true); max-height: 200px; height: expression(this.height > 200 ? 200: true);" />
</a>
</td>
<td>
<a href="/cgi-bin/showPicture.py?picPath=images/gallery/Open Day 2010/IMG_0223_resized.JPG">
<img src="images/gallery/Open Day 2010/IMG_0223_resized.JPG" class="pic" style="max-width: 100px; width: expression(this.width > 100 ? 100: true); max-height: 200px; height: expression(this.height > 200 ? 200: true);" />
</a>
</td>
<td>
<a href="/cgi-bin/showPicture.py?picPath=images/gallery/Open Day 2010/IMG_0220_resized.JPG">
<img src="images/gallery/Open Day 2010/IMG_0220_resized.JPG" class="pic" style="max-width: 100px; width: expression(this.width > 100 ? 100: true); max-height: 200px; height: expression(this.height > 200 ? 200: true);" />
</a>
</td>
</tr>
<tr>
<td>
<a href="/cgi-bin/showPicture.py?picPath=images/gallery/Open Day 2010/IMG_0220_resized.JPG">
<img src="images/gallery/Open Day 2010/IMG_0220_resized.JPG" class="pic" style="max-width: 100px; width: expression(this.width > 100 ? 100: true); max-height: 200px; height: expression(this.height > 200 ? 200: true);" />
</a>
</td>
<td>
<a href="/cgi-bin/showPicture.py?picPath=images/gallery/Open Day 2010/IMG_0196_resized.JPG">
<img src="images/gallery/Open Day 2010/IMG_0196_resized.JPG" class="pic" style="max-width: 100px; width: expression(this.width > 100 ? 100: true); max-height: 200px; height: expression(this.height > 200 ? 200: true);" />
</a>
</td>
</tr>
</table>
</div>
</body>
</html>
try getting rid of the expressions if you’re viewing in ie 7+ this explains that they got rid of expression support in favor of actually fixing their crappy css handling