En IE 6 para Windows se me desacomoda ligeramente la página y queda así
mientras k en firefox esta bien todo.
Código CSS
body{
text-align: center; /*para centrarlo en internet explorer*/
}
#cuerpo, #contenedor, #header{
width:780px;
margin: 0 auto;/* Es necesario poner un ancho o alto para que IE "limpie" el elemento automaticamente */
}
#header {
padding: 0;
margin:0;
}
#top-enlace {
float:left;
width:364px;
height:28px;
overflow:hidden;
background: url(images/top_enlace.gif) no-repeat;
}
#top-fig-1 {
float:left;
width:227px;
height:28px;
background: url(images/top_fig_1.gif) no-repeat;
}
#top-buscar {
float:right;
width:189px;
height:44px;
background: url(images/top_buscar.gif) no-repeat;
}
#top-medio-izq {
float:left;
width:180px;
height:142px;
overflow:hidden;
background: url(images/top_medio_izq.gif) no-repeat;
}
#logo {
float:left;
width:411px;
height:142px;
background: url(images/logo.gif) no-repeat;
}
#top-medio-der {
float:right;
width:189px;
height:142px;
overflow:hidden;
background: url(images/top_medio_der.gif) no-repeat;
}
#top-abajo-path {
float:left;
width:423px;
height:29px;
background: url(images/top_abajo_path.gif) no-repeat;
}
#top-fig-2 {
float:left;
width:168px;
height:29px;
background: url(images/top_fig_2.gif) no-repeat;
}
#top-fig-3 {
float:right;
width:189px;
height:13px;
background: url(images/top_fig_3.gif) no-repeat;
}
#top-contenido{
clear:both;
width:780px;
height:10px;
background: url(images/top_contenido.gif) no-repeat;
}
#contenedor {
overflow: hidden;
}
/* Limpiamos el contenedor para los navegadores que si funcionan como deben */
#contenedor:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden
}
#izquierda, #central, #derecha {
float: left;
padding-bottom: 32768px;
margin-bottom: -32768px;
}
#izquierda {
width: 180px;
background: url(images/menu_izq.gif) repeat-y;
}
#central {
width: 420px;
background: url(images/contenido.gif) repeat-y;
}
#derecha {
width: 180px;
background: url(images/menu_der.gif) repeat-y;
}
#bottom-contenido{
clear:left;
width:780px;
height:10px;
background: url(images/bottom_contenido.gif) no-repeat;
}
#footer {
clear: left;
width:780px;
height:40px;
margin: 0;
padding: 0;
background: url(images/pie.gif) no-repeat;
}
Código HTML
<div id="cuerpo">
<div id="header">
<div id="top-enlace"></div>
<div id="top-fig-1"></div>
<div id="top-buscar"></div>
<div id="top-medio-izq"></div>
<div id="logo"></div>
<div id="top-medio-der"></div>
<div id="top-abajo-path"></div>
<div id="top-fig-2"></div>
<div id="top-fig-3"></div>
</div>
<div id="top-contenido"></div>
<div id="contenedor">
<div id="izquierda">Texto sin formato CSS.Texto sin formato CSS.Texto sin formato CSS.</div>
<div id="central">Texto sin formato CSS.Texto sin formato CSS.Texto sin formato CSS.</div>
<div id="derecha">Texto sin formato CSS.Texto sin formato CSS.Texto sin formato CSS.</div>
</div>
<div id="bottom-contenido"></div>
<div id="footer"></div>
</div>