Eliminate the padding / margin around the images in & lt; td & gt; items

advertisements

I am displaying pictures in an HTML table and I have two rows with four pictures in each row.

My problem is that my <td> elements have a padding of about 20% around each picture inside the table and I cannot figure out how to get rid of them.

Consider the following HTML page (open it in a browser - the pics work). You will see the padding, margin, and border around each picture in a <td>element.

What do you think is wrong and how can I get rid of the area around each of the pictures?

<!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">
<style type="text/css">
<!--

body {
    font: 100%/1.4 Helvetica, Verdana, Arial sans-serif;
    height: 100%;
    margin: 0;
    /*background-image: url(../Images/BGshadowEx.jpg);*/
    background-repeat: repeat-x;
    padding: 0;
    color: #000;
    padding-top: 5%;
    font-size: 0.8em;
}

allery.table {margin: 0; padding: 0; border:5px solid red;}
#gallery.tr {margin: 0; padding: 0; background-color:red; border:5px solid red;}
#gallery.td {margin: 0; padding: 0; overflow:hidden; background-color:green; border:5px solid red;}
#gallery.a {margin: 0; padding: 0; overflow:hidden; border:5px solid red; }

-->
</style>
</head>

<body>

<div class="container">

  <div class="content">

     <!-- Announcement div goes here -->

    <div id="gallery" align="center">
        <table align="center" style="background-color: red;">
            <tr style="background-color: blue;"> </tr> <tr style="background-color: blue;">
                <td style="background-color: green;">
                    <a href="showPicture.py?picPath=../Images/1.jpg"><img class="meh" src="http://pstutorialsblog.com/tutorials/seamlesspatern/example.gif" class="pic" style="margin: 0; padding: 0; background-color: gray;"/></a>
                </td>
                <td style="background-color: green;">
                    <a href="showPicture.py?picPath=../Images/1.jpg"><img class="meh" src="http://pstutorialsblog.com/tutorials/seamlesspatern/example.gif" class="pic" style="margin: 0; padding: 0; background-color: gray;"/></a>
                </td>
                <td style="background-color: green;">
                    <a href="http://stabledays.typepad.com/.a/6a00e553bd675c88340115721c1a21970b-800wi"><img class="meh" src="http://stabledays.typepad.com/.a/6a00e553bd675c88340115721c1a21970b-800wi" class="pic" style="margin: 0; padding: 0; background-color: gray;"/></a>
                </td>
                <td style="background-color: green;">
                    <a href="http://stabledays.typepad.com/.a/6a00e553bd675c88340115721c1a21970b-800wi"><img class="meh" src="http://stabledays.typepad.com/.a/6a00e553bd675c88340115721c1a21970b-800wi" class="pic" style="margin: 0; padding: 0; background-color: gray;"/></a>
                </td>
            </tr>
            <tr style="background-color: blue;"> </tr> <tr style="background-color: blue;">
                <td style="background-color: green;">
                    <a href="showPicture.py?picPath=../Images/1.jpg"><img class="meh" src="http://pstutorialsblog.com/tutorials/seamlesspatern/example.gif" class="pic" style="margin: 0; padding: 0; background-color: gray;"/></a>
                </td>
                <td style="background-color: green;">
                    <a href="showPicture.py?picPath=../Images/1.jpg"><img class="meh" src="http://pstutorialsblog.com/tutorials/seamlesspatern/example.gif" class="pic" style="margin: 0; padding: 0; background-color: gray;"/></a>
                </td>
                <td style="background-color: green;">
                    <a href="showPicture.py?picPath=../Images/1.jpg"><img class="meh" src="http://pstutorialsblog.com/tutorials/seamlesspatern/example.gif" class="pic" style="margin: 0; padding: 0; background-color: gray;"/></a>
                </td>
                <td style="background-color: green;">
                    <a href="showPicture.py?picPath=../Images/1.jpg"><img class="meh" src="http://pstutorialsblog.com/tutorials/seamlesspatern/example.gif" class="pic" style="margin: 0; padding: 0; background-color: gray;"/></a>
                </td>
            </tr> 

        </table>
    </div>

  <!-- end .content --></div>

</body>
</html>


I have this problem all the time.

It's so annoying.

First off I usually set my doctype to strict:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

Second, I add a browser reset to the top (before any other css): (modified from http://www.vcarrer.com/2010/05/css-mini-reset.html)

html, body, div, form, fieldset, legend, label, img
{
 margin: 0;
 padding: 0;
}

table
{
 border-collapse: collapse;
 border-spacing: 0;
}

th, td
{
 text-align: left;

}

h1, h2, h3, h4, h5, h6, th, td, caption { font-weight:normal; }

img { border: 0; }

Finally, I add this line, which removes that stupid spacing which appears all the time, the one that isn't padding, margin or anything.

table, tr, td, th, tbody, thead{vertical-align:baseline}