Problema de margenes con IE7

[NekroX]

Antes de nada, hola a todos, este es mi primer post en este foro pero aseguro no sera el último.

Maquetando mi web me he encontrado con un problema en el margen inferior para IE7 que no me ocurre ni en IE6 ni en FF.

El problema esta al realizar una tabla con CSS, resulta que me respeta los margenes de 1px menos en la ultima "fila". El codigo es el siguiente:

Código:

<div class="table" style="width: 200px;">  
      <div class="col_tr_lf" style="width: 72px"><p>Usuario:</div>
      <div class="col_tr_lf" style="width: 112px">NekroX</div>
      <div class="col_tr_lf" style="width: 72px">Rango:</div>
      <div class="col_tr_lf" style="width: 112px">Game Admin</div>
      <div class="col_tr_lf" style="width: 72px">Mundo:</div>
      <div class="col_tr_lf" style="width: 112px">Español</div>
</div>

El codigo del CSS es el siguiente:

Código:

.col_tr_lf {
	display: inline;
	float: left;
	text-align: left;
	margin: 1px;
	padding: 3px;
	background-color: #FF0000;
	}
	
.table {
	margin-left: auto;
	margin-right: auto;
}

Lo dicho el IE7 no me pone el margen inferior de 1px en la ultima fila, mientras que el IE6 y FF si.

Saludos.

[emiliodeg]

agraga
.table {
margin-left: auto;
margin-right: auto;
padding-bottom:1px;
}

[juaniquillo]

Tienes que tener encuenta que le estás dando float a los divs externos. Ve este mensaje:
http://www.forosdelweb.com/f53/capas...-fondo-559011/

también tienes elemento<p> huerfano en el primer div interno.

[NekroX]

Gracias,

Solucionado en esa parte de la web con lo de overflow: auto;

No obstante ... tengo el mismo problema en otra parte, en el ultimo bloque del menu izquierdo ... que el IE7 no me deja el margen inferior, aun poniendo lo que me habeis propuesto

Este es el codigo ...

Código:

<div id="content">
<div id="content_menu">
  <div id="menu_block">
    <p>Z</p>
	<p>Y</p>
  </div>
  <div id="menu_block">
    <p>V</p>
	<p>W</p>
  </div>  
</div>
<div id="content_body">
  <div id="body_block">
    <p>A</p>
	<p>B</p>
	<p>C</p>
	<p>D</p>
	<p>E</p>
  </div>
</div>
</div>
<div id="fotter">
  <div id="fotter_left">
    <p>Aviso Legal</p>
  </div>
  <div id="fotter_center">
    <p>Copyright 2007-2008 © Integra Media Digital S.L.</p>
  </div>
  <div id="fotter_right">
    <p>Contacto</p>
  </div>
</div>

Y esta la hoja de estilos:

Código:

body {
	text-decoration: none;
	text-align: center;
	font-size: 11px;
	font-family: Verdana, SimSun, sans-serif;	
	color: #292212;
	background-color: #F2EEE6;
	margin: 3px auto;
	padding: 0px;
}

p {
	margin: 0px;
	vertical-align: baseline;
}

#content {
	display: table;
	width: 992px;
	margin-left: auto;
	margin-right: auto;
	overflow: auto;
}

#content_menu {
	display: inline;
	width: 188px;
	float: left;
	overflow: auto;
}

#content_body {
	display: inline;
	width: 804px;
	float: right;	
	overflow: auto;
}

#menu_block {
	display: inline;
	width: 160px;
	background-color: #DACAAD;
	border: 1px solid #7D673E;
	float: left;
	margin: 3px;
	padding: 10px;
}

#body_block {
	display: inline;
	width: 776px;
	background-color: #DACAAD;
	border: 1px solid #7D673E;
	float: right;
	margin: 3px;
	padding: 10px;
}

#fotter {
	display: table;
	width: 992px;
	margin-left: auto;
	margin-right: auto;
}

#fotter_left {
	display: inline;
	width: 130px;
	background-color: #DACAAD;
	border: 1px solid #7D673E;
	float: left;
	margin: 3px;
	padding: 10px;
}

#fotter_center {
	display: inline;
	width: 648px;
	background-color: #BDA671;
	border: 1px solid #7D673E;
	float: left;
	margin: 3px;
	padding: 10px;
}

#fotter_right {
	display: inline;
	width: 130px;
	background-color: #DACAAD;
	border: 1px solid #7D673E;
	float: left;
	margin: 3px;
	padding: 10px;
}

Asi es como se me ve en IE7 ...



Y asi como se me ve en FF (la correcta y la que busco):



Gracias!

Saludos.