problema con menu desplegable en IE8

baku2 · #1 (**permalink**) 11/04/2011, 05:49

hola amigos, estoy con algun ejemplo de menu desplegable al que le he ido acoplando los tamaños, letras, colores, el menu...

pero en chrome se queda centrado todo y en el IE8 se queda todo apelotonado uno encima de otro con los <div>

aporto unas imagenes para que veais con el mismo codigo lo que me sucede.

con chrome en XP sp2: en este va perfecto

asi es como quiero dejarlo en los navegadores, esta centrado y al 80% dejando en los lados izq y drcho 10% en cada uno.

con IE8 en XP sp2: aqui me fallan los divs

con este me sale alineado a la izquierda y todo encima amontonado.

con Firefox me coge bien los tamaños, pero no me coge los acentos:

en el <head> tengo esto:

Código:

<meta http-equiv="content-type" content="text/html; charset=UTF-8" /> 
	<meta http-equiv="content-style-type" content="text/css" /> 
	<meta http-equiv="content-language" content="es" /> 
	<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /> 
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

        <link rel="stylesheet" type="text/css" href="./css/menu_despl.css" />   esto carga el menu con su tamaño y colores
	<link rel="stylesheet" type="text/css" href="./css/modulo.css" />      esto carga los div y tamaños de los cuadros
	<script src="css/desplegable.js" type="text/javascript"></script>

uikekarallo · #2 (**permalink**) 11/04/2011, 09:55

Hola.

A mi me parece un problema de maquetado + css.

Y la metaetiqueta IE=EmulateIE7 está haciendo que lo que se ve en IE8 se vea como se vería en su antecesor. De todas formas, no tiene nada que ver. Muéstranos como tienes hecha la maquetación y el código css para que te podamos ayudar mejor.

Saludos.

baku2 · #3 (**permalink**) 11/04/2011, 10:09

es bastante extenso lo que tengo, son pocos ficheros los que tengo, se puede subir a MU para que lo descargueis?

es que ya digo que es extenso el codigo que tengo de cada cosa

de todas maneras estoy viendo a ver si lo hago en flash, pero el tiempo corre deprisa

uikekarallo · #4 (**permalink**) 11/04/2011, 10:23

Aquí te dejo un ejemplo de cómo maquetar eso utilizando un diseño líquido (no fijo).

Código HTML:

<style type="text/css">
	* { margin: 0; padding: 0; }
	#logo
	{
		position: relative;
		height: 40px;
		background: green;
	}
	#navbar
	{
		position: relative;
		height: 25px;
		background: lightgreen;
	}
	#left
	{
		float: left;
		width: 68%;
		padding: 1%;
		background: blue;
	}
	#right
	{
		float: right;
		width: 28%;
		padding: 1%;
		background: pink;
	}
	
	.clear { clear: both; }
</style>

  <div id="logo"></div>
  <ul id="navbar">
    <li>menus</li>
  </ul>
  <div id="left">izquierda</div>
  <div id="right">derecha</div>
	<div class="clear"></div>
	<div>continuamos...</div>

Un saludo.

baku2 · #5 (**permalink**) 11/04/2011, 11:14

uikekarallo, gracias a lo que me has puesto he conseguido que ahora en los 3 navegadores se me quede centrado y no se pisen unos con otros.

en lugar de usar:

#pagina
{ codigo ........}
#pagina .logo { codigo}
#pagina .izq {codigo}

los he usado por separado como has puesto abajo.

ahora tengo 2 problemas que uno no me molesta mucho pero el otro no se como solucionarlo aun

1.

EDITO: solucionado

2. ahora en los 3 navegadores, como ya he dicho antes, se me abre correctamente, pero a pesar de tener las medidas exactas, en el IE me deja un agujero en medio, cosa que en FF ni chrome me hace:

mod1.CSS

Código:

#logo{
width: 1010px;
height:100px;
background-color: green;
position: relative;
//border: 3px solid green;
margin: 0;
}

#left{
float: left;
width: 685px;
height:500px;
padding: 10px;
background-color: blue;
position: relative;
//border: 3px solid blue;
margin: 0;
}

#right{
float: right;
width: 285px;
height: auto;
padding: 10px;
background-color: pink;
position: relative;
//border: 3px solid pink;
margin: 0;
}
.clear { clear: both; }

he usado el padding porque en el chrome el texto se me queda totalmente pegado a la izquierda, en IE se queda bien.

uikekarallo · #6 (**permalink**) 11/04/2011, 15:04

Si las capas van a ir totalmente pegadas, prueba quitándole el float:right a la capa #right y debería acoplarse correctamente en todos los navegadores.

Recuerda tener siempre cuidado con los padding, ya que si una capa que mide 500px lleva 10px de padding, esa capa pasará a ocupar 520 de ancho (500+10+10). Y lo mismo con el alto.

Un saludo.

baku2 · #7 (**permalink**) 11/04/2011, 15:36

Cita:

Iniciado por uikekarallo

Si las capas van a ir totalmente pegadas, prueba quitándole el float:right a la capa #right y debería acoplarse correctamente en todos los navegadores.

Recuerda tener siempre cuidado con los padding, ya que si una capa que mide 500px lleva 10px de padding, esa capa pasará a ocupar 520 de ancho (500+10+10). Y lo mismo con el alto.

Un saludo.

lo del padding lo tengo controlado ya que es la medida que le quita por los 4 lados.

yo tengo el logo a 1000px y lo de abajo en 980px y 10px de padding (total 1000px) y queda igualado todo. pero resulta que me hace eso de dejar un hueco con el IE.

con el chrome y el FF me los deja pegados.

si le quito el right y pongo left, entonces me deja un hueco a la derecha, que es lo que no entiendo

uikekarallo · #8 (**permalink**) 11/04/2011, 17:23

Si no le pones ni float: right ni float: left, lo normal es que la capa siguiente a la flotada, si cabe, se acople pegada a la que tiene float: left.

Prueba así.

baku2 · #9 (**permalink**) 12/04/2011, 01:44

Cita:

Iniciado por uikekarallo

Si no le pones ni float: right ni float: left, lo normal es que la capa siguiente a la flotada, si cabe, se acople pegada a la que tiene float: left.

Prueba así.

acabo de probarlo y no, si le quito el float se superpone a la de la izquierda.
si le pongo float left se queda pegado a la de la izquierda, pero con la separacion a la derecha, cosa que en chrome no pasa.

bueno, ese error no me molesta mucho, porque luego el fondo se lo tengo que quitar, lo tengo asi para ver que la pagina se ve completa y hasta donde esta cada cosa.

uikekarallo · #10 (**permalink**) 12/04/2011, 02:35

Claro, perdona, se me olvidó decirte que si quitas le quitas el float a la capa #right también tienes que cambiar el width. Pero estoy pensando que tampoco te serviría porque si la capa derecha llega a tener más contenido que la izquierda, rellenaría el espacio por abajo.

Me explico:

Código HTML:

	#right
	{
		width: 98%;
		background: pink;
	}

En IE te deja ese hueco porque no entiende muy bien el concepto de padding... Si no haces cálculos del ancho, IE seguro que lo muestra bien. Vamos, que si cambias a esto:

Código HTML:

	#left
	{
		float: left;
		width: 70%;
		padding: 1%;
		background: blue;
	}
	#right
	{
		float: right;
		width: 30%;
		padding: 1%;
		background: pink;
	}

En IE se ve bien pero en los otros no. Podrías utilizar un comentario condicional para importar un css con instrucciones precisas para IE.

saul123 · #11 (**permalink**) 12/04/2011, 03:02

Hola

Por que no usas alguna aplicacion de jquery , ya que con eso no tendras problemas con los exploradores, aqui puedes ver un ejemplo y codigo que necesitas menu desplegable con jquery

baku2 · #12 (**permalink**) 12/04/2011, 07:17

ya lo uso. para eso es el menu de arriba, el problema lo tengo en los div de abajo

jomaruro · #13 (**permalink**) 16/04/2011, 03:35

Hola:

Lo más fácil es, utilizando comentarios condicionales, cambiar las dimensiones de los div's para IE, ya que el modelo de cajas de IE no es igual que FF y el resto de los navegadores. FF y Chrome siguen los estándares que indican que el ancho de un elemento será el width+border+padding+margin IE hace que el ancho de un elemento sea el width propiamente dicho incluyendo ya el border, el padding y el margin.

Dicho de otra manera:

En FF y chrome un elemento con width:50px, border-left:1px, border-right:1px, margin-left:2px, margin-right:2px, padding-left:5px y padding-right:5px dan un ancho de 66px, sin embargo el IE el ancho total del elemento serían 50px, porque todos los demás los incluye dentro del width.

Saludos.

baku2 · #14 (**permalink**) 16/04/2011, 08:26

y como se emplean los comentarios condicionales para el IE?

dame un ejemplo y lo pruebo en el .css

uikekarallo · #15 (**permalink**) 16/04/2011, 09:10

Los 2 primeros resultados de la búsqueda "comentarios condicionales" en Google lo dicen todo.

Saludos.