Padding Dissapearing on Hover

Padding collapsing

[skauchis]

Okay, so I've expanded my knowledge to CSS and XHTML and I've been doing fine with it until today... I'm attempting to gain myself a new website customer, and so I'd like this page to be perfect... But I'm having an issue with the right side padding dissapearing on one of my tables. This however only happens in IE and not in FireFox...

View the issue here : <snip>

The Code I have for this external CSS file is here:

table.one
{border-color: #FFFFFF;
border-collapse: collapse;
border-style: solid;
border-width: thin;
background-color: #FFFFFF;
table-layout: automatic}

td.a1
{border-color: #003366;
border-width: thin;
border-style: solid;
background-color: #FFFFFF;
padding: 1%;
text-align: center}

and the HTML:

<table width="75" cellspacing="0" cellpadding="0" align="center">
<tr>
<td class="a1" width="33%"><a href="2000.html"><img src="3.jpg" /></a>
</td>
<td class="a1" width="33%"><img src="2.jpg" />
</td>
<td class="a1" width="33%"><img src="1.jpg" />
</td>
</tr>
<tr>
<td class="a1" width="33%"><img src="1.jpg" />
</td>
<td class="a1" width="33%"><img src="2.jpg" />
</td>
<td class="a1" width="33%"><img src="3.jpg" />
</td>
</tr>
</table>

What am I doing wrong? Or what did I leave out that I'm missing? I need to show this small bit of work to the guy today...

[edited by: SuzyUK at 8:35 pm (utc) on June 28, 2007]
[edit reason] Please no URI's per TOS #13 [WebmasterWorld.com] [/edit]

[londrum]

an easy way to fix it would be to get rid of the padding altogether. don't have any padding in the table cells.
and then just put a white border of 6px, or whatever you want, on the images.
you could do the css like this

td img { border: 6px solid #fff; }

[edit] also, this doesn't affect the layout in any way, but you could cut down on the code quite a bit if you want. instead of putting classes and widths on all the cells, you could just put one class on the table itself.

so instead of having:

<table width="75" cellspacing="0" cellpadding="0" align="center">
<tr>
<td class="a1" width="33%"><a href="2000.html"><img src="3.jpg" /></a>
</td>
<td class="a1" width="33%"><img src="2.jpg" />
</td>
<td class="a1" width="33%"><img src="1.jpg" />
</td>
</tr>
<tr>
<td class="a1" width="33%"><img src="1.jpg" />
</td>
<td class="a1" width="33%"><img src="2.jpg" />
</td>
<td class="a1" width="33%"><img src="3.jpg" />
</td>
</tr>
</table>

you could cut it down to:

<table class="one">
<tr>
<td><a href="2000.html"><img src="3.jpg" /></a>
</td>
<td><img src="2.jpg" />
</td>
<td><img src="1.jpg" />
</td>
</tr>
<tr>
<td><img src="1.jpg" />
</td>
<td><img src="2.jpg" />
</td>
<td><img src="3.jpg" />
</td>
</tr>
</table>

the css would then be:

table.one
{width: 50%;
margin: 0 auto;
padding: 0;
border: 1px solid #FFF;
border-collapse: collapse;
background-color: #FFF;
table-layout: automatic}

table.one td
{width: 33%;
border: 1px solid #036;
background-color: #FFF;
padding: 1%;
text-align: center} 

[skauchis]

Alright, I played around with both of your suggestions... And in using the one where I give just the table a class... I come up with a new issue. The right border is now huge, while the top, bottom, and left border are all conforming to the 1% padding. Somewhere, the CSS Code Gods are laughing at me... I just don't know why this little table is misbehaving so much.

Despite this flaw I did show this site to the person I needed to, and he's impressed. So I need this fixed before he calls me on Monday to tell me wether or not he's picking my design. I just for the life of me can not figure out why this one little table is shifting on me.

EDIT! -- NM I'm an Idiot, I've got it fixed now. :) Thanks for the help... My problem went away when I put table.one td instead of table.two td ... :-/