Foros del Web » Creando para Internet » HTML »

problema con menu desplegable en IE8

Estas en el tema de problema con menu desplegable en IE8 en el foro de HTML en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 11/04/2011, 06:49
 
Fecha de Ingreso: marzo-2011
Mensajes: 12
Antigüedad: 6 años, 8 meses
Puntos: 0
problema con menu desplegable en IE8

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>

Última edición por baku2; 11/04/2011 a las 06:58
  #2 (permalink)  
Antiguo 11/04/2011, 10:55
Avatar de uikekarallo  
Fecha de Ingreso: diciembre-2009
Ubicación: Galicia
Mensajes: 338
Antigüedad: 8 años
Puntos: 16
Respuesta: problema con menu desplegable en IE8

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.
  #3 (permalink)  
Antiguo 11/04/2011, 11:09
 
Fecha de Ingreso: marzo-2011
Mensajes: 12
Antigüedad: 6 años, 8 meses
Puntos: 0
Respuesta: problema con menu desplegable en IE8

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
  #4 (permalink)  
Antiguo 11/04/2011, 11:23
Avatar de uikekarallo  
Fecha de Ingreso: diciembre-2009
Ubicación: Galicia
Mensajes: 338
Antigüedad: 8 años
Puntos: 16
Respuesta: problema con menu desplegable en IE8

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.
  #5 (permalink)  
Antiguo 11/04/2011, 12:14
 
Fecha de Ingreso: marzo-2011
Mensajes: 12
Antigüedad: 6 años, 8 meses
Puntos: 0
Respuesta: problema con menu desplegable en IE8

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.

Última edición por baku2; 11/04/2011 a las 13:23
  #6 (permalink)  
Antiguo 11/04/2011, 16:04
Avatar de uikekarallo  
Fecha de Ingreso: diciembre-2009
Ubicación: Galicia
Mensajes: 338
Antigüedad: 8 años
Puntos: 16
Respuesta: problema con menu desplegable en IE8

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.
  #7 (permalink)  
Antiguo 11/04/2011, 16:36
 
Fecha de Ingreso: marzo-2011
Mensajes: 12
Antigüedad: 6 años, 8 meses
Puntos: 0
Respuesta: problema con menu desplegable en IE8

Cita:
Iniciado por uikekarallo Ver Mensaje
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
  #8 (permalink)  
Antiguo 11/04/2011, 18:23
Avatar de uikekarallo  
Fecha de Ingreso: diciembre-2009
Ubicación: Galicia
Mensajes: 338
Antigüedad: 8 años
Puntos: 16
Respuesta: problema con menu desplegable en IE8

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í.
  #9 (permalink)  
Antiguo 12/04/2011, 02:44
 
Fecha de Ingreso: marzo-2011
Mensajes: 12
Antigüedad: 6 años, 8 meses
Puntos: 0
Respuesta: problema con menu desplegable en IE8

Cita:
Iniciado por uikekarallo Ver Mensaje
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.
  #10 (permalink)  
Antiguo 12/04/2011, 03:35
Avatar de uikekarallo  
Fecha de Ingreso: diciembre-2009
Ubicación: Galicia
Mensajes: 338
Antigüedad: 8 años
Puntos: 16
Respuesta: problema con menu desplegable en IE8

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.
  #11 (permalink)  
Antiguo 12/04/2011, 04:02
 
Fecha de Ingreso: marzo-2011
Mensajes: 119
Antigüedad: 6 años, 9 meses
Puntos: 9
Respuesta: problema con menu desplegable en IE8

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
  #12 (permalink)  
Antiguo 12/04/2011, 08:17
 
Fecha de Ingreso: marzo-2011
Mensajes: 12
Antigüedad: 6 años, 8 meses
Puntos: 0
Respuesta: problema con menu desplegable en IE8

ya lo uso. para eso es el menu de arriba, el problema lo tengo en los div de abajo
  #13 (permalink)  
Antiguo 16/04/2011, 04:35
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 15 años, 5 meses
Puntos: 361
Respuesta: problema con menu desplegable en IE8

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.

  #14 (permalink)  
Antiguo 16/04/2011, 09:26
 
Fecha de Ingreso: marzo-2011
Mensajes: 12
Antigüedad: 6 años, 8 meses
Puntos: 0
Respuesta: problema con menu desplegable en IE8

y como se emplean los comentarios condicionales para el IE?

dame un ejemplo y lo pruebo en el .css
  #15 (permalink)  
Antiguo 16/04/2011, 10:10
Avatar de uikekarallo  
Fecha de Ingreso: diciembre-2009
Ubicación: Galicia
Mensajes: 338
Antigüedad: 8 años
Puntos: 16
Respuesta: problema con menu desplegable en IE8

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


Saludos.

Etiquetas: desplegable, ie8
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 03:58.