La eterna maldición: Firefox OK, IE KO

#1 (**permalink**) 29/06/2007, 04:29

Estoy maquetando una web con tablas (con capas ya desistí...) pero ahora tengo un bloque que el border-spacing, el IE me lo tira por tierra...

Código:

<!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">
<head>
<title>Taller de les Paraules::</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="description" content="Poesia Visual" />
<meta name="keywords" content="poesia,visual,poesia visual,babilonia,navarrés,pliegos,pliegos de la vision" />
<link rel="stylesheet" href="themes/Default/style/style.css" type="text/css" media="screen,projection" />
<link rel="stylesheet" href="sections/pliegos/style/style.css" type="text/css" media="screen,projection" />
</head>
<body>
<table id="table-index">
 <tr id="tr-logo">
   <td colspan="2" id="td-logo">

     <img src="images/logo.jpg" alt="Logo" />
   </td>
 </tr>
 <tr id="tr-content">
   <td id="td-block">
     <table id="table-block">
     	<tr id="tr-block-up">
		  <td id="td-block-up">
		  </td>

		  <td id="td-block-upright">
		    <img src="themes/Default/images/borde-up.png" alt="borde-up" />
		  </td>
		</tr>
		<tr id="tr-block-content">
		  <td id="td-block-content">
		    <div class="negro">
		      <ul>
  <li><a href="index.php">Inicio</a></li>

  <li><a href="index.php?section=pliegos">Pliegos de la visión</a></li>
</ul>		    </div>
		  </td>
		  <td id="td-block-contentright">
		  </td>
		</tr>
		<tr id="tr-block-down">
		  <td id="td-block-down">

		  </td>
		  <td id="td-block-downright">
		    <img src="themes/Default/images/borde-down.png" alt="borde-down" />
		  </td>
		</tr>
     </table>
   </td>
   <td id="td-content">
        </td>

 </tr>
</table>
</body>
</html>

y el CSS

Código:

/* ETIQUETAS */
img {
	border:0px;
}
body {
	font-family: Verdana, Arial, sans-serif;
	font-size: 12px;
	background-color: #000000;
	margin: 0px;
	color: #FFFFFF;
}
div.negro {
	color: #000000;
}

a:link 	    { color:#FFFFFF; font-family: Verdana, Arial, sans-serif; font-size: 12px; text-decoration:underline }
a:active 	{ color:#FFFFFF; font-family: Verdana, Arial, sans-serif; font-size: 12px; text-decoration:underline }
a:visited 	{ color:#FFFFFF; font-family: Verdana, Arial, sans-serif; font-size: 12px; text-decoration:underline }
a:hover 	{ color:#FFFFFF; font-family: Verdana, Arial, sans-serif; font-size: 12px; text-decoration:overline }

a.negro:link 	    { color:#000000; font-family: Verdana, Arial, sans-serif; font-size: 12px; text-decoration:underline }
a.negro:active 		{ color:#000000; font-family: Verdana, Arial, sans-serif; font-size: 12px; text-decoration:underline }
a.negro:visited 	{ color:#000000; font-family: Verdana, Arial, sans-serif; font-size: 12px; text-decoration:underline }
a.negro:hover 		{ color:#000000; font-family: Verdana, Arial, sans-serif; font-size: 12px; text-decoration:overline }

/* ID's */
#table-index {
	margin-top: 0px;
	margin-left: 0px;
	border-spacing: 0px;
	width:100%;
}

#tr-logo {
	margin: 0px;
	width: 100%;
	height: 183px;
	vertical-align:middle;
}

#td-logo {
	margin: 0px;
	width: 100%;
	height: 183px;
	vertical-align:middle;
}

#tr-content {
	padding: 10px;
	width: 100%;
	vertical-align: top;
}

#td-block {
	padding: 5px;
	width: 20%;
	vertical-align: top;
}

#td-content {
	padding: 5px;
	width: 80%;
	vertical-align: top;
}

/* BLOCK */
#table-block {
	width: 200px;
	border-spacing: 0px;
	padding: 0px;
}

#tr-block-up {
	width: 200px;
	height: 10px;
	border-spacing: 0px;
	padding: 0px;
}

#td-block-up {
	width: 190px;
	height: 10px;
	background-color: #F3F3F3;
	border-spacing: 0px;
	padding: 0px;
}

#td-block-upright {
	width: 10px;
	height: 10px;
	border-spacing: 0px;
	padding: 0px;
}

#tr-block-content {
	width: 200px;
	border-spacing: 0px;
	padding: 0;
	background-color: #F3F3F3;
}

#td-block-content {
	width: 190px;
	border-spacing: 0px;
	padding: 0;
}

#td-block-contentright{
	width: 10px;
	border-spacing: 0px;
	padding: 0;
}

#tr-block-down {
	width: 200px;
	border-spacing: 0px;
	padding: 0;
}

#td-block-down {
	width: 190px;
	border-spacing: 0px;
	padding: 0;
	background-color: #F3F3F3;
}

#td-block-downright {
	width: 10px;
	border-spacing: 0px;
	padding: 0;
}

Alomejor podeis verlo en http://jpeeri.myftp.org/scripts/tall...ules/index.php pero no lo aseguro.

Lo que pasa es que quiero que se vea un bloque de la izquierda todo junto. En Firefox de lujo, pero en IE hay márgenes entre las celdas... :(

¿Alguna ayuda?

MWNS · #2 (**permalink**) 29/06/2007, 06:43

Cita:

Estoy maquetando una web con tablas (con capas ya desistí...)

cuál problema tienes ¿?, te evitarias ese tipo de asuntos si desarrollaras con CSS, cuenta que es, para ver en que podríamos ayudarte.

#3 (**permalink**) 29/06/2007, 06:52

Pues que con IE siempre hay algún problema, y me es más sencillo con tablas. Supongo que algún dia tendré que cambiar...

MWNS · #4 (**permalink**) 29/06/2007, 06:56

Cita:

Pues que con IE siempre hay algún problema

Definitivamente, IE no respeta muchas cosas .. es un asco

, si desarrollas con tablas siempre tendrás este tipo de problemas, no es difíl maquetar con CSS, hay buenos tutos por ahi

Si no sabes donde encontrarlos dilo y te paso las url.

Chau

#5 (**permalink**) 29/06/2007, 07:37

Pues la verdad, esos manuales me vendrían de perlas porque yo busco pero solo encuentro para maquetar con absolute y claro, cuando lo que intentas hacer es un mini-CMS que cree sus propios bloques es bastante complicado...

#6 (**permalink**) 02/07/2007, 07:22

Alguna otra solucion? :(