Fallo de menús en IE6 que se arregla al pasar por el menú.

haga41 · #1 (**permalink**) 09/09/2008, 09:35

Buenas,

Tengo una web que va bastante bien en Firefox pero en Explorer 6, me coge por defecto un padding- bottom más grande del que le tengo puesto en su css de explorer, sin embargo al pasar con el puntero por el menú se va arreglando y al final se quedan todos los botones del menú con el padding-bottom que deberían de tener. Eso sí si actualizas la página o vas a otra del mismo sitio ocurre lo mismo.

Esta es la página, estoy retocando aún la parte central que creo que no podré hacer con porcentajes al estar llena de imágenes, si me podéis ayudar os lo agradecería:

http://www.webng.com/haga041/motos2/enlaces.asp

Y estos son los css:

estilorevistamotos.css

Código HTML:

.columnaizquierda{
	float: left;
	width: 21%;
	margin-top: 1%;
	margin-left: 2%;
	margin-right: 2%;
	text-align: left;
	padding: 0;
	font-family: Arial, Helvetica, sans-serif;
	font-size:small;
	list-style-type: none;
	color:#FFFFFF;
	background-color:#efefef;
}
.columnaizquierda ul{
	list-style-type: none;
	background-color:#efefef;
	margin:0;
	padding:0;
	font-family: Arial, Helvetica, sans-serif;
	font-size: small;
}
.columnaizquierda ul li{
	margin-bottom: 2%;
	font-weight:bold;
}
.columnaizquierdalista a{
	color:#FFF;
	text-decoration:none;
	background-color:#800001;
	width: 96%;
	padding: 2%;
	display: block;
}
.columnaizquierdalista a:hover{
	color:#FFFFFF;
	background-color:#000;
}

estilorevistamotosIE.css

Código HTML:

.columnaizquierda{
	margin-left: 1%;
	margin-right: 3%;
}
.columnaizquierda ul{
	list-style-type: none;
	background-color:#f4f4f4;
	background-color:#efefef;
	margin:0;
	padding:0;
	font-family: Arial, Helvetica, sans-serif;
	font-size: small;
}
.columnaizquierda ul li{
	margin-bottom: 1%;
	font-weight:bold;
}
.columnaizquierdalista a{
	color:#FFF;
	text-decoration:none;
	background-color:#800001;
	width: 96%;
	padding: 2%;
	display: block;
}
.columnaizquierdalista a:hover{
	color:#FFFFFF;
	background-color:#000;
}

Mikmoro · #2 (**permalink**) 09/09/2008, 16:41

No sé exactamente cuál será el problema, pero si te puedo decir un par de cosas:

1.- IE6 tiene serios problemas para sumar cantidades, y normalmente para él 96% + 4% no es igual a 100%, sino a 101% (o así), lo que ocasiona montones de problemas.

2.- Muy a menudo IE6 produce problemas cuando una caja no tiene fijada una posición, relativa o absoluta. Muchos problemas se resuelven indicando una posición relativa a algunas cajas, algo bastante habitual en menús y otras cosas como desplegables.

3.- IE 6 suele tener problemas con las listas en vertical y en especial con los espacios entre ellas, que a menudo se resuelve poniendo un borde transparente, algo como:

li {border: solid 1px transparent;}

A ver si alguna de estas cosas te ayuda.

haga41 · #3 (**permalink**) 10/09/2008, 03:17

Muchas gracias por los consejos Mikel,

No tenía ni idea de lo del Explorer 6 con los porcentajes, hay veces que he llegado a usar porcentajes con decimales y cosas así para ajustar más así que ya no lo volveré a hacer.

Por lo demás he usado una combinación de los métodos 2 y 3 y se ha arreglado el problema, lo malo es que me ha creado otro, probablemente porque no controlo aún mucho lo de las position y los z-index. El caso es que el menú aparece ahora perfectamente desde el principio pero el banner que estaba debajo, ha quedado debajo del menú. Jugando con los position consigo poner el banner encima (superpuesto) pero no debajo (flotado).

Así tengo el css de explorer ahora:

Código HTML:

.contenedor{	
	width: 100%;
	margin-top: 0;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: auto;
}
.columnaizquierda{
	width: 21%;
	margin-top: 1%;
	text-align: left;
	padding: 0;
	font-family: Arial, Helvetica, sans-serif;
	font-size:small;
	list-style-type: none;
	color:#FFFFFF;
	background-color:#efefef;
	margin-left: 1%;
	margin-right: 3%;
	float:left;
}
.columnaizquierda ul{
	list-style-type: none;
	background-color:#f4f4f4;
	background-color:#efefef;
	margin:0;
	padding:0;
	font-family: Arial, Helvetica, sans-serif;
	font-size: small;
	position:absolute;
}
.columnaizquierda ul li{
	margin-bottom: 1%;
	font-weight:bold;
	border: solid 1px transparent;
	position:relative;
}
.columnaizquierdalista a{
	color:#FFF;
	text-decoration:none;
	background-color:#800001;
	width: 96%;
	padding: 2%;
	display: block;
}
.columnaizquierdalista a:hover{
	color:#FFFFFF;
	background-color:#000;
}
/*.centrado_banner1{
	float:left;
}*/
.banner{
	border:0;
	width:100%;
	height:100%;	
}

Sin aplicar el estilo .centrado_banner1 se ve el menú perfectamente pero no el banner, que queda debajo y si lo aplico se ve el banner pero no el menú.

El código de la página es este:

Código HTML:

<div class="contenedor">
<!--<div>-->
	<div class="columnaizquierda">
    	<ul>
            <li class="columnaizquierdalista">
            	<a href="index.asp" accesskey="i" >Inicio</a></li>

            <li class="columnaizquierdalista">
            	<a href="news.asp" accesskey="n" >Noticias</a></li>
            <li class="columnaizquierdalista">
            	<a class="col1" href="tests.asp" accesskey="p" >Pruebas</a></li>
            <li class="columnaizquierdalista">
            	<a href="contact.asp" accesskey="c" >Contacto</a></li>
            <li class="columnaizquierdalista">

            	<a href="comparar.asp" accesskey="p" >Comparativa</a></li>
            <li class="columnaizquierdalista">
            	<a href="enlaces.asp" accesskey="l" >Links</a></li>
            <li class="columnaizquierdalista"  >
            	<a href="users.asp" accesskey="z" >Zona de usuarios</a></li>
      </ul>
            <div class="centrado_banner1">

              <a href="http://www.dainese.com"><img class="banner" src="imagenes/bannerdainese.jpg" alt="Banner Dainese" longdesc="http://haga041.webng.com/motos/bannerdainesedesc.html"/></a></div>
</div>

He probado a meter el div del banner dentro de otra capa en vez de estar en la misma que el menú, pero me lo ha desplazado a la derecha.

Mikmoro · #4 (**permalink**) 10/09/2008, 03:34

Claro, esto te ocurre porque tienes el "ul" .columnaizquierda ul en posición absoluta, algo que creo que no necesitas. Si está dentro de una caja (<div class="columnaizquierda">), no necesitas que la lista esté en posición absoluta. Cámbila por relativa (position: relative) y el banner aparecerá debajo sin problema (creo).
Y quítale el float:left al banner, que tampoco le hace falta.

haga41 · #5 (**permalink**) 10/09/2008, 03:56

Creo que te he entendido pero no si lo he hecho bien porque aunque el banner vuelve a salir donde debería...el padding vuelve a desmadrarse como al principio.

Estos son los cambios que le he hecho a los estilos:

Código HTML:

.columnaizquierda ul{
	list-style-type: none;
	background-color:#f4f4f4;
	background-color:#efefef;
	margin:0;
	padding:0;
	font-family: Arial, Helvetica, sans-serif;
	font-size: small;
	position:relative;
}
.columnaizquierda ul li{
	margin-bottom: 1%;
	font-weight:bold;
	border: solid 1px transparent;
	position:relative;
}
.centrado_banner1{
	margin:0;
	padding-bottom:10%;
}

El estilo centrado_banner1 es igual que antes sólo que ahora te muestro el contenido, es el contenido heredado del estilo para Firefox.

Mikmoro · #6 (**permalink**) 10/09/2008, 04:10

¿Lo has actualizado? no veo los cambios en tu página.

Por otro lado, tienes dos veces la definición de color de fondo en el ul:

background-color:#f4f4f4;
background-color:#efefef;

y yo no pondría el margen inferior de los li en porcentaje, que sólo te causará problemas y creo que ninguna ventaja

.columnaizquierda ul li{
margin-bottom: 1%;

Defínelo en px y vemos qué ocurre.

haga41 · #7 (**permalink**) 10/09/2008, 04:37

Todavía no lo había actualizado, lo había probado en red local y luego me habían liado un poco y no lo había podido subir, ahora ya está actualizado y va ok con lo que me has comentado en el último mensaje.

He usado las medidas en píxels para padding y margin y ahora si va bien.
Lo de los porcentajes era por intentar hacer la web, lo más líquida posible pero con la altura de las imágenes me da muchos problemas así que creo que los usaré para las anchuras y poco más.

Mikmoro · #8 (**permalink**) 10/09/2008, 04:45

Para las anchuras está bien, pero para las alturas suele ser menos aconsejado y más problemático, y mucho menos para márgenes y cosas por el estilo.

Me alegro de que te haya servido.

Saludos.

haga41 · #9 (**permalink**) 11/09/2008, 02:59

Gracias por tu paciencia y tus consejos.

Sobre lo de la anchura en porcentajes en Explorer 6 tengo un problema y es que hay 2 secciones de mi web que he actualizado: index y enlaces en las que hay una parte que no puedo ponerla en porcentajes por culpa de las imágenes que van dentro así que lo pongo en píxels pero las columnas izquierda y derecha sí estan en porcentajes. ¿Está bien hacerlo así o debería de cambiarlo todo a píxels y ya está? En Firefox sólo estan en píxels las fotos que van en la parte central de la sección de enlaces.

http://www.webng.com/haga041/motos2/index.asp
http://www.webng.com/haga041/motos2/enlaces.asp

Mikmoro · #10 (**permalink**) 11/09/2008, 03:28

A este respecto hay que tomar siempre en consideración algunas cosas: si tus columnas son en porcentajes pero contienen cosas de ancho fijo, ¿qué ocurrirá cuando reduzcamos la ventana del navegador? que esas cosas empezarán a saltar, porque no caben dentro de su caja o columna. ¿Queremos eso? seguro que no.

Para hacer un diseño líquido, es muy difícil que todas las partes vayan a dimensionar correctamente por sus contenidos, luego lo más recomendable es, por ejemplo, hacer las columnas de los lados con tamaño fijo en pixels y la columna central, que será la que se adapte, no ponerla en porcentaje, sino dejarla sin tamaño para que ocupe todo el espacio disponible. ¿Qué diferencia hay en esto? pues que en este caso, cuando la columna empieza a reducirse, si hay algún elemento que se lo impide por tener tamaño fijo, sencillamente a partir de ahí la columna deja de reducirse, y todo queda quieto en un tamaño mínimo, el del elemento de tamaño fijo.

Esto es mucho más adaptable. Se deben usar porcentajes cuando estás seguro de que los contenidos pueden redimensionar sin problemas.

En tu caso concreto, fíjate lo que ocurre cuando empiezas a reducir la ventana: el menú se empieza a reducir hasta que casi no se ve; los elementos como la caja del buscador saltan a otra columna; el textbox, como no reduce, queda siempre igual y empieza a salirse de su caja y quedar desproporcionado; tu título desaparece por debajo; la moto de arriba empieza a desaparecer, etc.

Yo tiendo a dejar elementos fijos y que redimensionen los que pueden hacerlo sin romper la estructura.

Espero que te sirva.

P.D.: ¡¡¡grande "il dotore"!!!

haga41 · #11 (**permalink**) 11/09/2008, 10:20

Di que sí, Rossi es un crack!!!

Respecto a lo que me comentas, lo he estado intentando pero tengo un problema, aparte de poner una ancho fijo en las columnas izquierda y derecha, acabo necesitando un ancho fijo para el div central: portada o portada3, ya que salvo en el caso del index, en el que tanto el div central como la imagen no llevan ancho en sus clases y se ven bien en Firefox y Explorer el resto de secciones se me desmadran si no les doy una anchura.

El problema probablemente sea de un div que pongo antes en el que va el nombre de la sección: titularlinks4 al que si no le pongo un ancho se me ve pequeño y me da problemas pero incluso si no pongo la capa con el titular, las fotos, noticias, etc, se me desmadran al no ponerles ancho. Esto puedo arreglarlo dandole un porcentaje de anchura en Firefox pero en Explorer la sección de enlaces se me rompe si lo hago así.

¿Quizá debería hacerlo todo con píxels esta vez?

Es que la parte de enclaces me gusta como está ahora aunque , con las imágenes cambiantes por css(en lugar de javascript) y veo díficil cuadrarlas sin poner anchura a píxels al cuadro central.

Mikmoro · #12 (**permalink**) 11/09/2008, 11:11

Esto es básicamente por dos cosas:
1.- el contenedor general (<div class="todo">) sigue siendo en porcentaje, entonces como los dos bloques de la cabecera tienen tamaño fijo en px, en cuanto no caben deben saltar a la siguiente línea. Esto se suele arreglar por ejemplo poniendo la imagen de la moto como fondo de la caja de cabecera en lugar de la imagen insertada, de tal manera que cuando reduces la ventana hay en realidad un sólo elemento, y entonces la moto no saltaría a la siguiente línea, sino que iría desapareciendo por debajo del bloque de la izquierda.
2.- Cuando quieres construir una estructura líquida de tres columnas, con los lados fijos y el centro adaptable, lo que debes hacer es poner primero la columna de la derecha con float right; luego la de la izquierda con float left y luego la central sin float ni tamaño. De esa manera, la central siempre ocupa exactamente el espacio que le quede disponible reduciendo y ampliando si nada se lo impide.

Lo de las otras secciones no lo he entendido bien pero masca un poco esto que te digoy luego vemos lo otro.

haga41 · #13 (**permalink**) 11/09/2008, 12:04

No se si te he entendido bien del todo, he dejado el div class="todo" con su 76% y sus márgenes izquierdo y derecho en auto, he dejado en un solo div la imagen de fondo de las letras con la moto, la columna izquierda está con el float:left y la derecha con el float:right, y el div central portada sin float ni width.

Por alguna razón que no entiendo en Firefox no me respeta los márgenes y se me pega a la columna izquierda y si haces click en esa capa con el Firebug es como si cogiera todo el ancho posible, aunque no lo necesita, con sus márgenes marcados en los límites. En Explorer me tumba la columna derecha pero me respeta el margen con la columna izquierda.

Quizá tenga que ver con que tanto las columnas laterales como la central estan dentro de la capa contenedor que es la que da el fondo blanco y tiene un width 100% pero en principio lo veo bien así he quitado el width y no he visto ningún cambio.

Mikmoro · #14 (**permalink**) 11/09/2008, 12:14

No, efectivamente creo que no me has entendido. Luego intento darte un ejemplo.

haga41 · #15 (**permalink**) 11/09/2008, 12:32

Ok, muchas gracias, lo he vuelto a subir de otra forma, creo que ahora las he puesto en el orden correcto: capa derecha, capa izquierda y capa central pero me fallará otra cosa porque no acaba de ir bien:

<HTML>
<div class="todo">
<div id="titulo_revista">

</div>
<div class="hora_dia">
<div class="hora">2:41:37 PM</div>
<div class="dia">9/11/2008</div>
</div>

<div class="contenedor">




<div class="columnaderecha">
<ul>
<li>
<form name="form1" method="post" id="form1" action="resultados.asp" class="formulario">
<label for="textobuscador">Buscador <input name="buscador" type="text" id="textobuscador" size="20" value="Buscar" accesskey="b" /></label>

<label for="buscadornoticias"><input name="buscador" type="radio" id="buscadornoticias" value="1" checked="checked" />Noticias<br /></label>
<label for="buscadorpruebas"><input name="buscador" type="radio" id="buscadorpruebas" value="2" />Pruebas<br /></label>
</li>

<li class="boton">
<label for="button"><input type="submit" name="button" id="button" value="Buscar" /></label>
</li>
</form>
</ul>

<a href="http://www.alpinestars.com"><img class="banner2" src="imagenes/banneralpinestars.gif" alt="Banner AlpineStars" longdesc="http://haga041.webng.com/motos/banneralpinestarsdesc.html"/></a>

</div>
<div class="columnaizquierda">
<ul>
<li class="columnaizquierdalista">
<a href="index.asp" accesskey="i" >Inicio</a></li>

<li class="columnaizquierdalista">
<a href="news.asp" accesskey="n" >Noticias</a></li>
<li class="columnaizquierdalista">
<a class="col1" href="tests.asp" accesskey="p" >Pruebas</a></li>
<li class="columnaizquierdalista">
<a href="contact.asp" accesskey="c" >Contacto</a></li>
<li class="columnaizquierdalista">

<a href="comparar.asp" accesskey="p" >Comparativa</a></li>
<li class="columnaizquierdalista">
<a href="enlaces.asp" accesskey="l" >Links</a></li>
<li class="columnaizquierdalista" >
<a href="users.asp" accesskey="z" >Zona de usuarios</a></li>
</ul>
<div class="centrado_banner1">

<a href="http://www.dainese.com"><img class="banner" src="imagenes/bannerdainese.jpg" alt="Banner Dainese" longdesc="http://haga041.webng.com/motos/bannerdainesedesc.html"/></a>
</div>
</div>

<div class="portada">
<img src="imagenes/bike_cover.jpg" class="cover" />
</div>


<div class="corte"></div>
</div>
<div id="datos_contacto">
</div>
</head>
</html>
</HTML>

Mikmoro · #16 (**permalink**) 11/09/2008, 12:40

Sí, si, eso por supuesto: el banner en la columna de la derecha, que es donde lo querías poner, ¿no?

haga41 · #17 (**permalink**) 11/09/2008, 13:51

Sí, lo del banner de la derecha era algo que tenía que haber arreglado hace tiempo, lo de ponerlo dentro del div="columnaderecha", el problema es que en Explorer no me hace el hueco de padding-bottom del ul entre la lista y el banner y en Firefox sí.

En Firefox el problema es sobre todo con la portada que me la junta con la columna izquierda y no me deja los márgenes, es como si la pusiera por debajo del div class="hora_dia". He probado con z-index y con position pero no conisgo dejarlo en el centro, estos cambios los hechos en el css local aún no lo he subido pero vamos que no me queda bien.

haga41 · #18 (**permalink**) 26/09/2008, 04:32

Hola de nuevo,

He estado bastante liado teniendo últimamente con otras cosas pero al fin he podido terminar los estilos para esta web, apenas faltan unas cosas, eso sí de momento se ve bien en Firefox ya que Explorer es un poco desastre, tampoco ayuda un banner que me han puesto en el sitio donde la tengo alojada pero encima de que es gratis no me voy a quejar.

El caso es que antes de meterme con arreglar los estilos para Explorer tengo una duda tonta, he creado el típico panel de usuario y contraseña y aunque siempre los suelo poner cada uno en una línea y el input justo debajo del texto, ahora creo que queda mejor poner justo al lado, antes lo tenía en tablas, así que lo he adaptado a capas y lo he intentado hacer con li, float:left, display, etc pero no hay manera de que los input me los alinee a la derecha. Ahora mismo estan los textos y los inputs dentro del mismo li pero incluso poniendolos en li separados no consigo alinearlos bien.

Si pudiera ayudarme alguien se lo agradecería mucho.

http://www.webng.com/haga041/motos2/users.asp