Foros del web, para los que viven de bits

Al Zuwaga · 09-ago-2006, 12:55

Estoy haciendo este menú deplegable (es el 'coso' azul oscuro) con listas anidadas pero -para variar- estoy teniendo un pequeño problema con IE.

Están todos los 'sub-menú' posicionados absolutos (al igual que el '<ul> general') y cada uno tiene un margen izquierdo de 180px, pero IE me toma este margen -aparentemente- desde el final del último caracter del '<li> padre' y no desde el extremo izquierdo de su '<ul> padre' (cosa que si ocurre con FF)

La hoja de estilos es esta http://personal.alzuwaga.com.ar/estilos_tiau.css y los estilos involucrados hasta este momento son:

Código:

#lat_nav {
	margin: 0px;
	padding: 0px;
	list-style-type: none;
	background-color: #003366;
	position: absolute;
	width: 180px;
}
#lat_nav li {
	display: block;
	width: 180px;
	height: 25px;
	line-height: 25px;
}
.lat_nav_1nivel, .lat_nav_2nivel {
	margin: 0px;
	padding: 0px;
	list-style-type: none;
	position: absolute;
	display: none;
	margin-left: 180px;
	margin-top: -25px;
}
.lat_nav_1nivel {
	background-color: #009933;
}
.lat_nav_2nivel {
	background-color: #FF9900;
}

¿Qué puedo hacer para solucionar el problema en IE?

EDIT: Y el html involucrado es este:

Código:

<ul id="lat_nav">
        <li onmouseover="activar_submenu('sub_institucional');" onmouseout="desactivar_submenu('sub_institucional')">Institucional &raquo;
          <ul id="sub_institucional" class="lat_nav_1nivel">
            <li>Objetivos</li>
            <li>Carta Urbana</li>
            <li>Autoridade</li>
          </ul>
        </li>
        <li onmouseover="activar_submenu('sub_invyaccion');" onmouseout="desactivar_submenu('sub_invyaccion')">Investigaci&oacute;n y Acci&oacute;n &raquo;
          <ul id="sub_invyaccion" class="lat_nav_1nivel">
            <li onmouseover="activar_submenu('sub_polurbanas');" onmouseout="desactivar_submenu('sub_polurbanas')">Pol&iacute;ticas Urbanas &raquo;
              <ul id="sub_polurbanas" class="lat_nav_2nivel">
                <li>Tertulias y Debates</li>
                <li>Asesoramiento Ciudadano</li>
                <li>Estudios</li>
                <li>Charlas</li>
                <li>Escuelas Urbanas</li>
              </ul>
            </li>
            <li onmouseover="activar_submenu('sub_culturbana');" onmouseout="desactivar_submenu('sub_culturbana')">Cultura Urbana &raquo;
              <ul id="sub_culturbana" class="lat_nav_2nivel">
                <li>Recorridos</li>
                <li>XXX</li>
              </ul>
            </li>
            <li onmouseover="activar_submenu('sub_conurbana');" onmouseout="desactivar_submenu('sub_conurbana')">Conciencia Urbana &raquo;
              <ul id="sub_conurbana" class="lat_nav_2nivel">
                <li>1</li>
                <li>2</li>
              </ul>
            </li>
          </ul>
        </li>
        <li onmouseover="activar_submenu('sub_difycom');" onmouseout="desactivar_submenu('sub_difycom')">Difusi&oacute;n y Comunicaci&oacute;n &raquo;
          <ul id="sub_difycom" class="lat_nav_1nivel">
            <li>Programas Radiales</li>
            <li onmouseover="activar_submenu('sub_publicaciones');" onmouseout="desactivar_submenu('sub_publicaciones')">Publicaciones &raquo;
              <ul id="sub_publicaciones" class="lat_nav_2nivel">
                <li>Cuadernos TIAU</li>
                <li>La ciudad y no s&eacute; que cosa</li>
                <li>Art&iacute;culos</li>
                <li>Libros</li>
              </ul>
            </li>
          </ul>
        </li>
      </ul>

Al Zuwaga · 09-ago-2006, 12:59

(ya que estamos... ¿que "les dice", en una primera impresión, el 2do ícono del menú superior?)

Al Zuwaga · 09-ago-2006, 14:32

Solución:

Código:

.lat_nav_1nivel, .lat_nav_2nivel {
	left: 0;
	margin: 0px;
	padding: 0px;
	list-style-type: none;
	position: absolute;
	display: none;
	margin-left: 180px;
/*	margin-top: -25px; PARA FF*/
/*	margin-top: -6px; PARA IE*/
}

EDIT: No había probado con left porque imagine que, al estar osicionados absolutos, se me colocarían las listas a 180 px desde el extremo de la pantalla del navegador (del body, vamos)

webosiris · 09-ago-2006, 14:37

hola Al, a tu menú le veo un fallo de accesibilidad ya que depende de js para que funcione... actualmente se pueden hacer muy buenas cosas con CSS puro, usando la pseudo-class :hover

Al Zuwaga · 09-ago-2006, 14:49

Hola weobsiris, pensé en ello, pero desistí de hacerlo fully css devido a que IE no interpreta el :hover en 'otra cosa' que no sea un enlace. Y no todos los elementos de las listas son enlaces. Justamente no son enlaces los <li> que despliegan un submenú. Entonces.. ¿pondría un enlace que lleve a ningún lado?

webosiris · 09-ago-2006, 15:06

podrías poner enlaces con href="#"... si, se que no es lo más recomendable, pero se trata de ver que es lo "menos pior"..

09-ago-2006, 12:59	#2 (permalink)
Al Zuwaga Moderador Fecha de Ingreso: noviembre-2002 Ubicación: 34.517 S, 58.500 O Mensajes: 12.301	(ya que estamos... ¿que "les dice", en una primera impresión, el 2do ícono del menú superior?) __________________ ···---···

09-ago-2006, 14:32	#3 (permalink)
Al Zuwaga Moderador Fecha de Ingreso: noviembre-2002 Ubicación: 34.517 S, 58.500 O Mensajes: 12.301	Solución: Código: .lat_nav_1nivel, .lat_nav_2nivel { left: 0; margin: 0px; padding: 0px; list-style-type: none; position: absolute; display: none; margin-left: 180px; /* margin-top: -25px; PARA FF/ / margin-top: -6px; PARA IE/ } EDIT: No había probado con left* porque imagine que, al estar osicionados absolutos, se me colocarían las listas a 180 px desde el extremo de la pantalla del navegador (del body, vamos) __________________ ···---···

09-ago-2006, 14:37	#4 (permalink)
webosiris Moderador HTML y CSS Fecha de Ingreso: noviembre-2002 Ubicación: /home/montevideo Mensajes: 5.965	hola Al, a tu menú le veo un fallo de accesibilidad ya que depende de js para que funcione... actualmente se pueden hacer muy buenas cosas con CSS puro, usando la pseudo-class :hover __________________ Oraculus.com. Sitios web artesanales para el siglo XXI PSD a HTML. Tu diseño. Nuestro código.

09-ago-2006, 14:49	#5 (permalink)
Al Zuwaga Moderador Fecha de Ingreso: noviembre-2002 Ubicación: 34.517 S, 58.500 O Mensajes: 12.301	Hola weobsiris, pensé en ello, pero desistí de hacerlo fully css devido a que IE no interpreta el :hover en 'otra cosa' que no sea un enlace. Y no todos los elementos de las listas son enlaces. Justamente no son enlaces los <li> que despliegan un submenú. Entonces.. ¿pondría un enlace que lleve a ningún lado? __________________ ···---···

09-ago-2006, 15:06	#6 (permalink)
webosiris Moderador HTML y CSS Fecha de Ingreso: noviembre-2002 Ubicación: /home/montevideo Mensajes: 5.965	podrías poner enlaces con href="#"... si, se que no es lo más recomendable, pero se trata de ver que es lo "menos pior".. __________________ Oraculus.com. Sitios web artesanales para el siglo XXI PSD a HTML. Tu diseño. Nuestro código.

Herramientas
Mostrar Versión Imprimible Enviar por Correo
Desplegado
Mode Lineal Cambiar a Modo Hibrido Cambiar a Modo Hilado