Buenas,
por primera vez estoy tratando de crear una página web basada prácticamente en su totalidad en CSS. Por el momento solo tengo una gran dificultad: hacer que esté 'cohesionada' una tabla basada en CSS tanto en firefox como en IE 7. En el IE 7 se ve genial pero en el Firefox 2 la parte de abajo de la 'tabla' está separada cosa así como de un renglón.
Código:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<head>
<title>Tabla en CSS.</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
div.top {
height:12px;
background-color: #FFFF99;
margin-left:0; margin-right:0; margin-top:2em; margin-bottom:0}
img.esquina_sup_izq { float:left; }
img.esquina_sup_der { float:right; }
div.content {
background-color: #ffffcc;
margin:0 }
div.boxcontrol {
background-color: #ffffcc;
padding-left:5%; padding-right:5%; padding-top:0; padding-bottom:0; margin:0 }
div.bottom { height:18px;
background-color: #FFFF99;
border:0px none;
padding:0;
margin:0}
img.esquina_inf_izq { float:left; }
img.esquina_inf_der { float:right; }
</style>
</head>
<body bgcolor="#008000">
<div id="top" class="top">
<img src="imagenes/ttop_izq.jpg" class="esquina_sup_izq" width="16" height="11" />
<img src="imagenes/ttop_der.jpg" class="esquina_sup_der" width="18" height="11" />
<font size="1">Arriba</font></div>
<div id="content" class="content">
<div id="box_control" class="boxcontrol">
Blablabla<p>blblabla</p>
<p>blabla</p>
<p>blalba y justamente aquí debajo y entre la parte baja se genera un
espacio en el Firefox.</div>
</div>
<div id="bottom" class="bottom">
<img src="imagenes/tbtm_izq.jpg" class="esquina_inf_izq" width="16" height="16" />
<img src="imagenes/tbtm_der.jpg" class="esquina_inf_der" width="16" height="16" />
<font size="1">Parte baja</font></div>
</body>
</html>
El código CSS de la tabla lo extraje de una serie de manuales/guías precisamente para esto y luego cambié las imagenes de la tabla, aunque para facilitarlo, al publicarlo aquí, en el CSS he quitado las imagenes de fondo de la tabla y los he sustituido por backgruound-color.
El problema es tan tonto como q no se ve bien en Firefox por lo que decía,
¿Me podeis hechar un cable
?
Saludos y gracias
PD: en el código CSS he tenido que quitar en parte lo de
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " www w3 org /TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns=" www w3 org /1999/xhtml">
ya que me lo detectaba como SPAM al tener pocos mensajes.