Códigos extraños, hacen cosas distintas y son iguales

[Charlii]

Estoy programando una web y en X parte, voy a ocupar que algo luzca de X manera, el caso es que hice este código que supuestamente hacía exactamente lo que yo quería (el .css está más abajo):

Código:

<div class="porta1">
	&nbsp;
	</div>
	<div class="porta2">
	<table border="0" width="900px" cellpadding="0" cellpadding="0">
	<tr>
	<td class="porta_r1">
	A
	</td>
	<td>
	B
	</td>
	<td class="porta_r1">
	C
	</td>
	</tr>
	</table>
	</div>
	<div class="porta3">
	&nbsp;
	</div>

Luego voy y lo pruebo en Firefox y ZAZ!, se ve mal, hay unos bordes blancos que no deberían estar. Lo pruebo en IE y lo mismo, en Opera y Safari y lo mismo.

Le busco un buen rato y no encuentro el error. Decido borrar y empezar de nuevo, y termino en esto:

Código:

<div class="porta1">
	&nbsp;
	</div>
	<div class="porta2">
	<table border="0" width="900px" cellpadding="0" cellspacing="0">
	<tr>
	<td class="porta_r1">
	A
	</td>
	<td>
	B
	</td>
	<td class="porta_r1">
	C
	</td>
	</tr>
	</table>
	</div>
	<div class="porta3">
	&nbsp;
	</div>

Lo pruebo en Firefox, IE, Safari y Opera y en todos OK!!, luego, me doy cuenta de que ¡AMBOS CÓDIGOS SON IDÉNTICOS!, el que provoca los bordes y el que se ve bien.

¿Qué es esto? No le encuentro explicación.

Pueden verlo en acción en: http://rojocereza.com/rareza/

Añado el código del style.css:

Código:

.porta1{
	border-top: 2px solid #FFFFFF;
	background: #2d9dc5;
	height: 20px;
}
.porta2{
	background: #FFFFFF;
	font-family: Arial, Helvetica, sans-serif;
	border-bottom: 20px solid #2d9dc5;
}
.porta3{
	border-top: 2px solid #FFFFFF;
	background: #371707;
	height: 20px;
}

.porta_r1{
	background: #2d9dc5;
	width: 20px;
}

[helacer]

fgacil en el de arriba le quedaron dos cellpading eso es lo que esta generando el problemita


saludos.

[Charlii]

Wow no lo vi....... !!! gracias