Foros del Web » Creando para Internet » CSS »

Tres columnas, IE7 vs Moz

Estas en el tema de Tres columnas, IE7 vs Moz en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 24/04/2007, 14:14
Avatar de hector_he  
Fecha de Ingreso: agosto-2006
Ubicación: Barcelona
Mensajes: 207
Antigüedad: 11 años, 3 meses
Puntos: 4
Tres columnas, IE7 vs Moz

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-height100%;heightauto;}

BODY {
font-familyVerdanaArialHelveticasans-serif;
font-size12px
color:white;
margin6px 0px
text-aligncenter
background:#000000  url(images/bg.jpg) no-repeat bottom;


/* headers */
h1h2h3h4h5h6{margin:0px;}
h2{
text-align:left;
margin-bottom:4px
}
h3
background:#FF0066; 
text-align:left
padding4px;
font-weight:bold;
}
h4{
text-align:left;  
padding0px
margin-top:8px;
}
h5{
text-align:right;  
padding0px
margin:2px 0px 8px 0px;
}
h6{
font-weight:normal;
text-align:center;  
padding0px
margin:4px 0px;
}

/* div 2 columns*/
#container{
text-alignleft
margin0px;
padding0px;  
width:700px;

#head{
width:700px
height:200px
margin-bottom6px;
text-align:center;
}
#body{
margin10px 0px;


/* div lateral right*/
#lateral{
text-align:left;
width110px;
margin0px
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-bottom14px;
margin-left160px;
margin-right:auto;
padding10px 12px
background:url(images/bgtext.jpgrepeat-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-alignleft;
margin:auto;
padding:6px 0px;
}
#menu ul {
margin:0px;
padding0px;
list-
style-typenone;
}
#menu li { 
width:150px
height:auto
margin:2px 0px;
}
#menu a {
colorwhite
font-size:14px
font-weightbold;
text-decorationnone
padding6px 12px;
displayblock;
}
#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.

Última edición por hector_he; 03/05/2007 a las 12:13
  #2 (permalink)  
Antiguo 24/04/2007, 14:17
Avatar de DragonX
Colaborador
 
Fecha de Ingreso: mayo-2002
Ubicación: Funkyland
Mensajes: 8.339
Antigüedad: 15 años, 6 meses
Puntos: 153
Re: Tres columnas, IE7 vs Moz

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

gracias!
  #3 (permalink)  
Antiguo 24/04/2007, 14:31
Avatar de hector_he  
Fecha de Ingreso: agosto-2006
Ubicación: Barcelona
Mensajes: 207
Antigüedad: 11 años, 3 meses
Puntos: 4
Re: Tres columnas, IE7 vs Moz

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
  #4 (permalink)  
Antiguo 24/04/2007, 16:14
Avatar de floren  
Fecha de Ingreso: febrero-2005
Ubicación: Málaga
Mensajes: 134
Antigüedad: 12 años, 10 meses
Puntos: 0
Re: Tres columnas, IE7 vs Moz

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.
  #5 (permalink)  
Antiguo 24/04/2007, 16:50
Avatar de hector_he  
Fecha de Ingreso: agosto-2006
Ubicación: Barcelona
Mensajes: 207
Antigüedad: 11 años, 3 meses
Puntos: 4
Re: Tres columnas, IE7 vs Moz

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
  #6 (permalink)  
Antiguo 25/04/2007, 00:25
Avatar de floren  
Fecha de Ingreso: febrero-2005
Ubicación: Málaga
Mensajes: 134
Antigüedad: 12 años, 10 meses
Puntos: 0
Re: Tres columnas, IE7 vs Moz

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.
  #7 (permalink)  
Antiguo 25/04/2007, 10:50
Avatar de hector_he  
Fecha de Ingreso: agosto-2006
Ubicación: Barcelona
Mensajes: 207
Antigüedad: 11 años, 3 meses
Puntos: 4
Re: Tres columnas, IE7 vs Moz

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

Última edición por hector_he; 25/04/2007 a las 11:03
  #8 (permalink)  
Antiguo 25/04/2007, 13:50
Avatar de floren  
Fecha de Ingreso: febrero-2005
Ubicación: Málaga
Mensajes: 134
Antigüedad: 12 años, 10 meses
Puntos: 0
Re: Tres columnas, IE7 vs Moz

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.
  #9 (permalink)  
Antiguo 30/04/2007, 21:13
Avatar de hector_he  
Fecha de Ingreso: agosto-2006
Ubicación: Barcelona
Mensajes: 207
Antigüedad: 11 años, 3 meses
Puntos: 4
Re: Tres columnas, IE7 vs Moz

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?
  #10 (permalink)  
Antiguo 01/05/2007, 04:15
 
Fecha de Ingreso: abril-2007
Mensajes: 232
Antigüedad: 10 años, 7 meses
Puntos: 2
Re: Tres columnas, IE7 vs Moz

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.
  #11 (permalink)  
Antiguo 09/05/2007, 07:15
Avatar de hector_he  
Fecha de Ingreso: agosto-2006
Ubicación: Barcelona
Mensajes: 207
Antigüedad: 11 años, 3 meses
Puntos: 4
Re: Tres columnas, IE7 vs Moz

Pues me temo que no hay suerte.
IE/ sigue mostrando al tercera columna más pequeña y no se a que es debido...
  #12 (permalink)  
Antiguo 14/05/2007, 06:06
Avatar de hector_he  
Fecha de Ingreso: agosto-2006
Ubicación: Barcelona
Mensajes: 207
Antigüedad: 11 años, 3 meses
Puntos: 4
Re: Tres columnas, IE7 vs Moz

Sigo sin entender cual es el problema...
  #13 (permalink)  
Antiguo 18/05/2007, 20:56
 
Fecha de Ingreso: agosto-2003
Mensajes: 499
Antigüedad: 14 años, 3 meses
Puntos: 1
Re: Tres columnas, IE7 vs Moz

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).
__________________
Plaza Mozilla
http://www.chevrel.org/es/noticias/
  #14 (permalink)  
Antiguo 25/05/2007, 20:29
Avatar de hector_he  
Fecha de Ingreso: agosto-2006
Ubicación: Barcelona
Mensajes: 207
Antigüedad: 11 años, 3 meses
Puntos: 4
Re: Tres columnas, IE7 vs Moz

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...
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 16:59.