Problemas con Margin

#1 (**permalink**) 26/11/2006, 12:58

Hola buenos dias. Verán tengo los siguientes scripts:

Código HTML:

<table border="0" cellpadding="0" cellspacing="0" width="100%" height="100%">
  <tr height="130">
    <td width="100%" class="logo" colspan="2">
    <img src="themes/Default/images/logo.gif" alt="logo.gif" />
    </td>
  </tr>
  <tr>
    <td width="20%" class="menu">
    <ul>
      <li>
        Inicio
      </li>
    </ul>
    </td>
    <td width="80%" class="content">
    Hola buenos dias <a href="jose.gif">Jose</a>
    </td>
  </tr>
</table>

y este es el CSS:

Código:

/* ETIQUETAS */
IMG {
	border:0px;
}
BODY {
 	margin-bottom: 0px;
	margin-left: 0px;
	margin-right: 0px;
	margin-top: 0px;
}
FONT {
 	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: black
}
TABLE {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: black
}
H1 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 15px
}
H2 {
 	font-family: Arial, Helvetica, sans-serif;
	 font-size: 14px
}
H3 {
 	font-family: Arial, Helvetica, sans-serif;
	 font-size: 13px
}
H4 {
 	font-family: Arial, Helvetica, sans-serif;
	 font-size: 12px
}
H5 {
 	font-family: Arial, Helvetica, sans-serif;
	 font-size: 12px
}
H6 {
 	font-family: Arial, Helvetica, sans-serif;
	 font-size: 12px
}
H7 {
 	font-family: Arial, Helvetica, sans-serif;
	 font-size: 12px
}
H8 {
 	font-family: Arial, Helvetica, sans-serif;
	 font-size: 12px
}

A:link 	    { color:#000; FONT-FAMILY: Arial, Helvetica, sans-serif; FONT-SIZE: 11px; text-decoration:underline }
A:active 	{ color:#000; FONT-FAMILY: Arial, Helvetica, sans-serif; FONT-SIZE: 11px; text-decoration:underline }
A:visited 	{ color:#000; FONT-FAMILY: Arial, Helvetica, sans-serif; FONT-SIZE: 11px; text-decoration:underline }
A:hover 	{ color:green; FONT-FAMILY: Arial, Helvetica, sans-serif; FONT-SIZE: 11px; text-decoration:overline}

/* ESTILOS DEFINIDOS */
.logo {
	background-color: #153510;
	text-align: right;
}
.menu {
	background-color: #45b335;
	color: #FFF;
	vertical-align: top;
	margin: 10px 10px 10px 10px;
}
menu.A:link 	{ color:#000; FONT-FAMILY: Arial, Helvetica, sans-serif; FONT-SIZE: 11px; text-decoration:underline }
menu.A:active 	{ color:#000; FONT-FAMILY: Arial, Helvetica, sans-serif; FONT-SIZE: 11px; text-decoration:underline }
menu.A:visited 	{ color:#000; FONT-FAMILY: Arial, Helvetica, sans-serif; FONT-SIZE: 11px; text-decoration:underline }
menu.A:hover 	{ color:green; FONT-FAMILY: Arial, Helvetica, sans-serif; FONT-SIZE: 11px; text-decoration:overline}
.content {
	background-color: #D6FFC1;
	vertical-align: top;
	margin: 10px 10px 10px 10px
}

Pueden ver el resultado aquí: http://jpeeri.myftp.org/scripts/cjProjects/

El problema como habréis podido averiguar algunos. Es que los margenes que le digo a las dos celdas de debajo no me hacen ni caso. Intento que sean de 10 px entre cada extremo pero nada.

¿Alguna idea? Muchisimas gracias

SiR.CARAJ0DIDA · #2 (**permalink**) 26/11/2006, 13:03

las celdas no tienen margen, solo padding. el espacio que separa las celdas esta dada por la propiedad border-spacing de la tabla

#3 (**permalink**) 26/11/2006, 13:31

Oh Thanks!!

Se arreglo!!

#4 (**permalink**) 29/11/2006, 07:29

Ahora tengo otro problema. Nose porque ahora el alto de la página no me lo reconoce bien...

Acabo de descubrir que si quito el DOCTYPE funciona. Si lo quito el height vuelve a estar mal...

SiR.CARAJ0DIDA · #5 (**permalink**) 29/11/2006, 12:24

porque el atributo "height" en la tabla es un invento de bill gates, tenes que hacer las cosas bien y poner el height dentro del atributo style.
la forma correcta sería <table style="height:100%"> y la tabla debe estar contenida en un elemento que tenga un alto mayor al de la tabla.

#6 (**permalink**) 29/11/2006, 12:36

MmM.

Ahora lo que tengo es esto:

Código HTML:

!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="description" content="Tus proyectos en red" />
<meta name="keywords" content="project, projects, site, creaciones-jpeeri, jpeeri" />
<link rel="stylesheet" href="themes/Default/style/style.css" type="text/css" />
<link rel="stylesheet" href="sections/projects/style/style.css" type="text/css" />
<title>cjProjects :: Tus proyectos en red</title>
</head><body>
<table style="height: 100%; width: 100%; border: 0px;" cellspacing="0">
  <tr height="130">
    <td width="100%" class="logo" colspan="2">
    <img src="themes/Default/images/logo.gif" alt="logo.gif" />

    </td>
  </tr>
  <tr>
    <td width="20%" class="menu">
    <ul>
      <li>
        Inicio
      </li>
    </ul>

    </td>
    <td width="80%" class="content">
      Aqui el codigo principal
    </td>
  </tr>
</table>
</body>
</html>

Y nada no funciona...