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...