Foros del Web » Creando para Internet » CSS »

problema en IE: desplazamiento de menu

Estas en el tema de problema en IE: desplazamiento de menu en el foro de CSS en Foros del Web. Tengo un problema con IE (como no...), el caso es que me muestra el menu horizontal unos pixeles desplazados hacia la derecha: BIEN en FIREFOX/Win, ...
  #1 (permalink)  
Antiguo 16/06/2006, 14:56
 
Fecha de Ingreso: octubre-2004
Mensajes: 48
Antigüedad: 13 años, 1 mes
Puntos: 0
problema en IE: desplazamiento de menu

Tengo un problema con IE (como no...),

el caso es que me muestra el menu horizontal unos pixeles desplazados hacia la derecha:

BIEN en FIREFOX/Win, OPERA/Win, IE/Mac, SAFARI/Mac:



MAL en IE/Win (IE 6.02XX) :



y eso que utilizo un css condicional para IE, pero no se donde está el error

Si alguien pudiera echarle un vistazo.... la URI es: http://faccion.es/webs/comex/

Aqui teneis el código de la sección "main-navigation" del CSS:
Código:
/* -------Main Navigation ---------- */
#main-nav { 
	height: 62px;
	margin-left: 361px;
	background: #317893 url(../images/fondo_menu.jpg);
	padding-left: 0px;
}

	#main-nav dl { 
		margin: 0; 
		padding: 0; 
	}

/* IE5 Mac Hack \*/ 
#main-nav { padding-left: 0px; }
/*/ 
#main-nav { padding-left: 0px; overflow: hidden; } 
/* End Hack */

	#main-nav dt { float: left; }
	
	#main-nav dt a {
		display: block;
		height: 0px !important;
		height /**/: 62px; /* IE 5/Win hack */ 
		padding: 62px 0 0 0;
		overflow: hidden;
		background-repeat: no-repeat;
		outline: none;
	}
	#main-nav dt a:hover {
		background-position: 0 -62px;
		outline: none;
	}
	
	body.empresa dt#empresa,
	body.empresa dt#empresa a,
	body.empresa dt#empresa a:hover,
	body.delegaciones dt#delegaciones,
	body.delegaciones dt#delegaciones a,
	body.delegaciones dt#delegaciones a:hover,
	body.productos dt#productos,
	body.productos dt#productos a,
	body.productos dt#productos a:hover,
	body.contacto dt#contacto,
	body.contacto dt#contacto a, 
	body.contacto dt#contacto a:hover {
		background-position: 0 -124px;
	}

	
	#main-nav dt#empresa,
	#main-nav dt#empresa a { width: 149px; background-image: url(../images/nav/empresa.gif); }
	
	#main-nav dt#delegaciones,
	#main-nav dt#delegaciones a { width: 148px; background-image: url(../images/nav/delegaciones.gif); }
	
	#main-nav dt#productos,
	#main-nav dt#productos a { width: 148px; background-image: url(../images/nav/productos.gif); }
	
	#main-nav dt#contacto,
	#main-nav dt#contacto a { width: 147px; background-image: url(../images/nav/contacto.gif); }

Gracias de antemano

Última edición por OrgasmUs; 16/06/2006 a las 15:03
  #2 (permalink)  
Antiguo 16/06/2006, 15:32
Avatar de fer10  
Fecha de Ingreso: octubre-2005
Ubicación: Guadalajara - Mexico
Mensajes: 905
Antigüedad: 12 años, 2 meses
Puntos: 3
prueba Borrando esto:
Cita:
<div class="sinmargen">
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>

<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>

<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
</div>
te recomendaria no usar capas con: position:absoulte, asi no tienes que poner &nbsp; para rellenar los espacios.
__________________
Saludos
FT.
www.fernando.com.mx

Última edición por fer10; 16/06/2006 a las 16:01
  #3 (permalink)  
Antiguo 16/06/2006, 16:37
 
Fecha de Ingreso: octubre-2004
Mensajes: 48
Antigüedad: 13 años, 1 mes
Puntos: 0
ya, pero si necesito posicionar un elemento determinado en una posicion exacta, y que varie relativamente al redimensionarse la ventana... ¿como hacerlo sin "position: absolute"?

Por otra parte, esa capa no tiene nada que ver, el problema está en "main-nav" (he probado a hacer lo que dices,pero obviamente no funciona, ya que no tiene nada que ver)

Ese exceso de &nbsp; solo tiene por funcion estirar hacia abajo la capa para conseguir el efecto faux-columns, es posioble que no esté bien hecho, y que deba hacerse de otra manera (mas que posible, seguramente), pero creo que no influye para nada en el problema de la seccion de main-navigation
  #4 (permalink)  
Antiguo 24/06/2006, 03:20
 
Fecha de Ingreso: octubre-2004
Mensajes: 48
Antigüedad: 13 años, 1 mes
Puntos: 0
Bueno, finalmente he conseguido encontrar el error, asi que lo cuento aqui, por si a alguien le ha ocurrido lo mismo alguna vez.

Todo radica en un bug de IE/Win, conocido como el gap de los 3 pixeles, lo teneis descrito (y su solución) en:

http://www.positioniseverything.net/...reepxtest.html

Asi que poniendole un height: 1%; al div que se iba de marras (main-nav) y un display: inline; se soluciona el tema

fer10 Tenias más razon que un santo, de hecho esos <p>&nbsp;</p> eran una atrocidad, lo que pasaba es que si quitaba ese <div class="sinmargen"> no me mostraba la imagen de fondo del sidebar, pero conseguí solucionar eso poniendole a ese div (el sidebar) un margin-bottom: auto y un padding-bottom= XXXpx;. Tu comentario me movió a quitarlo e ir probando. Gracias

Desde luego sobraba todo ese <p>&nbsp;</p>. Aún esta el codigo muy sucio (como los position: absolute) que hay que quitar, o el menu convertirlo en una lista, en lugar de usar dt y dl, pero poco a poco lo iremos arreglando
  #5 (permalink)  
Antiguo 26/06/2006, 10:20
 
Fecha de Ingreso: febrero-2006
Ubicación: Buenos Aires
Mensajes: 54
Antigüedad: 11 años, 10 meses
Puntos: 0
linda web, saludos!
__________________
pan con pan comida de redundantes.

www.objetoepsilon.com.ar
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 05:18.