Tres columnas, IE7 vs Moz

hector_he · #1 (**permalink**) 24/04/2007, 13:14

Hola a todos,
tengo un problema con la visualización de una página:

En IE7 se reducen la culmunas central y derecha dejando un espacio.

En Moz a parte de reducir las fuentes de los headers, coloca toda la maquetación hacia la izquierda pero los espacios entre columnas son correctos.

Código PHP:

  /* background height */ 
html {min-height: 100%;height: auto;} 
 
BODY { 
font-family: Verdana, Arial, Helvetica, sans-serif; 
font-size: 12px;  
color:white; 
margin: 6px 0px;  
text-align: center;  
background:#000000  url(images/bg.jpg) no-repeat bottom; 
}  
 
/* headers */ 
h1, h2, h3, h4, h5, h6{margin:0px;} 
h2{ 
text-align:left; 
margin-bottom:4px;  
} 
h3{  
background:#FF0066;  
text-align:left;  
padding: 4px; 
font-weight:bold; 
} 
h4{ 
text-align:left;   
padding: 0px;  
margin-top:8px; 
} 
h5{ 
text-align:right;   
padding: 0px;  
margin:2px 0px 8px 0px; 
} 
h6{ 
font-weight:normal; 
text-align:center;   
padding: 0px;  
margin:4px 0px; 
} 
 
/* div 2 columns*/ 
#container{ 
text-align: left;  
margin: 0px; 
padding: 0px;   
width:700px; 
}  
#head{ 
width:700px;  
height:200px;  
margin-bottom: 6px; 
text-align:center; 
} 
#body{ 
margin: 10px 0px; 
}  
 
/* div lateral right*/ 
#lateral{ 
text-align:left; 
width: 110px; 
margin: 0px;  
float:right; 
padding:8px; 
background:#FA6494 url(images/bgright.jpg) repeat-x top; 
} 
#lateral ul{ 
margin:0px; 
padding:0px; 
list-style:none; 
} 
#lateral li{ 
padding:0px; 
margin-bottom:14px; 
display:block; 
} 
 
/* text style and list */ 
.text{ 
width:380px;  
margin-bottom: 14px; 
margin-left: 160px; 
margin-right:auto; 
padding: 10px 12px;  
background:url(images/bgtext.jpg) repeat-y center; 
} 
.text ul{ 
margin:0px; 
padding:0px; 
} 
.text li{ 
list-style:none; 
margin:6px 0px; 
padding:0px; 
} 
 
/* menu left */ 
#menu{ 
width:150px; 
height:auto; 
float:left; 
background:#FA6494 url(images/bgmenu.jpg) no-repeat top; 
text-align: left; 
margin:auto; 
padding:6px 0px; 
} 
#menu ul { 
margin:0px; 
padding: 0px; 
list-style-type: none; 
} 
#menu li {  
width:150px;  
height:auto;  
margin:2px 0px; 
} 
#menu a { 
color: white;  
font-size:14px;  
font-weight: bold; 
text-decoration: none;  
padding: 6px 12px; 
display: block; 
} 
#menu a:hover { 
background:#FF6699 url(images/bgmenub.jpg) repeat center; 
}

Text es la columna central, Menu la de izquierda y Lateral la dela derecha.

Muchas gracias.

DragonX · #2 (**permalink**) 24/04/2007, 13:17

podrías colocar también el código HTML?

gracias!

hector_he · #3 (**permalink**) 24/04/2007, 13:31

Perdón, estaba editando, he colocado también dos capturas.

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>Pinku Jisatsu desu!!!</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="identifier-URL" content="http:///" />
<meta name="Keywords" content="," />
<meta name="Description" content="Pinku Jisatsu Official Website" />
<link rel="STYLESHEET" type="text/css" href="style.css" />
<script type="text/javascript" src="niftycube.js"></script>
<script type="text/javascript">
window.onload=function(){
Nifty("div.text,div#menu,div#lateral","small transparent");
}
</script> 
</head>
<body>
<div id="container">
  <div id="head">
  <a href="index.php"><img src="images/head.jpg" alt="Pinku Jisatsu" width="700" height="200" border="0" /></a>  </div>
    <div id="body">
<div id="menu">
<ul>
<li>menu1</li>
<li>menu2</li>
</ul>
<div style="clear:both"></div>
</div>
<div id="lateral">
  <h5>titulo</h5>
  <ul>
  <li>lista1</li>
  <li>lista2</li>
  </ul>
</div>
    <div class="text">
texto
    </div>
  </div>
<h6>creditos</h6>
</div>
</body>
</html>

Originalmente está dividida en distintos archivos php unidos con la función include, cada color representa las particiones.
Gracias

floren · #4 (**permalink**) 24/04/2007, 15:14

Prueba a sustituir margin: auto; en el container. Mz te lo coloca a la izquierda porque no hay nada que le diga lo contrario; IE te da un falso positivo.

hector_he · #5 (**permalink**) 24/04/2007, 15:50

Muchas grcias por la respuesta.
Ahora Moz me centra la maquetación pero no logro encontrar el porque de ese espacio/reducimiento de las columnas en IE7

floren · #6 (**permalink**) 24/04/2007, 23:25

Si tuvieras un link donde ver la página sería más fácil ver qué está pasando. No sé si el margin:auto; de #menu lo está interpretando cada navegador de una forma; tal vez dándole valores concretos a margin y width de ambas capas se ubiquen donde deseas.

Espero te sirva.

hector_he · #7 (**permalink**) 25/04/2007, 09:50

Gracias, estoy probando con los cambios de margin i width pero no logro entender porque IE7 muestra ese reducimiento teniendo un valor en px cada cada de anchura...
Sejo el link:

http://www.pinkujisatsu.cjb.net/

Probando descubro que la visualización se hace correcta si se le suma el padding derecho +izquierdo al witdh total, pero en Mozilla se hace demasiado grande...
Lo que m hace pesnar que los width se leen mal o algo, en Moz hay imágens que miden 380px de ancho dentro de .text qe mide 380px de ancho más 12 de padding por cada lado...

floren · #8 (**permalink**) 25/04/2007, 12:50

Cierto, las sumas totales difieren en IE del resto a la hora de intrepretar lo que ocupa una capa. No estoy muy puesto pero las soluciones pasan por aplicar hacks para IE o bien no aplicar relleno a un elemento de tiene ancho fijo.

hector_he · #9 (**permalink**) 30/04/2007, 20:13

Lo siento pero no se que es un hack?...

Estoy días y días dando vueltas al asunto.
He creado otra capa dentro de la cual van todas las text class

#text{
width:404px;
margin:0px 0px 14px 160px;
padding:0px;
}

.text{
width:auto;
margin-bottom:12px;
padding: 10px 12px;
background:url(images/bgtext.jpg) repeat-y center;
}

El problema queda con #lateral, la tercera columna..si sumamos vamos por partes:
150px (#menu) + 10px de espacio + 404px (#text): 564px
Restando los 700 de #container: 136px, si queremos dejar otros 10px de espacio son 126px prestando el padding de #letarla que es 16 (8 por lado) queda por 110px perfecto para mozilla pero IE7 lo muestra más pequeño...porque?

JHMorales · #10 (**permalink**) 01/05/2007, 03:15

Hola:
debes anular los margin y padding al comienzo del css, los navegadores manejan distinto estos elementos por defecto y por ello es mejor ponerlos a cero para todos

* {margin:0;padding:0;}

Suerte, Jorge H.

hector_he · #11 (**permalink**) 09/05/2007, 06:15

Pues me temo que no hay suerte.
IE/ sigue mostrando al tercera columna más pequeña y no se a que es debido...

hector_he · #12 (**permalink**) 14/05/2007, 05:06

Sigo sin entender cual es el problema...

PascalC · #13 (**permalink**) 18/05/2007, 19:56

tienes un script antes de la declaracion de DTD, eso esta mal y causa bugs de rendimiento en IE (por lo menos IE6, estoy en Linux y ahora no puedo mirar lo que da en IE7).

hector_he · #14 (**permalink**) 25/05/2007, 19:29

Gracias por la respuesta!
Ese script lo incluye iespana al colgar tus páginas en una cuenta gratuita.
Pero provando sin subirla en el servidor ocurre esto también, a lo que no logro explicarem si es por la relación de width-padding o que...