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">
</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">
</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">
</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">
</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;
}