Ayuda con compatibilidad para IE7

mpmanolo · #1 (**permalink**) 19/08/2009, 13:49

HOla.

Tengo un grna problema. hace unos dias hice una pagina en css, y me funciono totalmente pero el problema es la compatibilidad con IE7. no me permite ver los menus desplegables que estan en la pagina.

si alguien me puede ayudar ? por favor.

este es el css del menu.

Código:

<style type="text/css">
#menu_catalogos {	 /* estilo general */
	margin:40px 0 0 6px;
	color:#FFF;
	font-size: 13px;
	font-family: Arial, Helvetica, Verdana, sans-serif;
	font-weight:bold;
	list-style: none;
	text-align:center;
}
#menu_catalogos ul {		
	font-family: Arial, Helvetica, Verdana, sans-serif;
	font-size: 12px;
	font-weight: normal;
	list-style: none;
	float: left;
	padding:0px;
	text-align:left;
	color:#FFF;
	margin:0 0 0 0;
}

#menu_catalogos a { /* ancho fondo interior de las l’neas */
	display: block;
	width: 150px;
	color:#FFF;
	text-decoration: none;
	text-align: center;
	padding: 0px;
	font-size: 12px;
}

#menu_catalogos li {
	float: left;
	padding: 0;
	margin-left: -1px;
	margin-bottom: -1px;
	width: 215px;
}

#menu_catalogos li ul { 
	position: absolute;
	left: -999em;
	height: auto;
	width: 215px; /* ancho interior */
	font-weight: normal;
	background:#000;
}

#menu_catalogos li li { /* recuadro exterior lineas primer nivel */
	
}

#menu_catalogos li ul a { /* recuadro exterior lineas segundo nivel */
	text-align: left;
	padding: 2px;
}

#menu_catalogos li ul ul { /* posici—n tabla tercer nivel */
	margin-left: 185px;
	margin-top: -17px;
}

#menu_catalogos li:hover ul ul, #menu_catalogos li:hover ul ul ul, #menu_catalogos li.sfhover ul ul, #menu_catalogos li.sfhover ul ul ul {
	left: -999em;
}

#menu_catalogos li:hover ul, #menu_catalogos li li:hover ul, #menu_catalogos li li li:hover ul, #menu_catalogos li.sfhover ul, #menu_catalogos li li.sfhover ul, #menu_catalogos li li li.sfhover ul {
	left: auto;
}

#menu_catalogos li ul li:hover, #menu_catalogos li.sfhover {
	background:#999;
	font-weight:bold;
	border:1px solid #FFF;
}
</style>

y aqui es donde los llamo

Código HTML:

<div id="boton_inmobiliarios" style=" float:left">
        	<div id="menu_catalogos">
            	<li>INMOBILIARIO Y AMBIENTES
                	<ul>
                    	<li>Inmobiliario y Ambientes</li>
                        <li>Malla y Guirnalda</li> 
                        <li>Polybrite Luminaria Flujo</li> 
                        <li>Polybrite M60 Decorativas</li> 
                    </ul>
               </li>
       </div>
</div>

GRacias

jomaruro · #2 (**permalink**) 21/08/2009, 12:00

Hola:

Te recomiendo que te des una vuelta por la página de Mikmoro www.araudi.net o por las FAQ's del foro donde podrás encontrar varios ejemplos de menús desplegables.

Saludos.

kseso? · #3 (**permalink**) 21/08/2009, 12:27

Prueba a sustituir y añadir esto a tu css:

Cita:

#menu_catalogos ul li ul {/*esta la dejas así */
display: none;
height: auto;
width: 215px; /* ancho interior */
font-weight: normal;
background:#000;
}
#menu_catalogos ul li:hover ul {display: block; } /*esta la añades*/

En el html debes añadir la primera lista:

Cita:

<div id="menu_catalogos">
<ul>
<li>INMOBILIARIO Y AMBIENTES
<ul>
<li>Inmobiliario y Ambientes</li>
<li>Malla y Guirnalda</li>
<li>Polybrite Luminaria Flujo</li>
<li>Polybrite M60 Decorativas</li>
</ul>
</li>
</ul>
</div>

Pero deberás depurar y arreglar el código css algo más.

Un saludo

deirdre · #4 (**permalink**) 21/08/2009, 17:50

Hola mpmanolo

Aparte de lo que te dice kseso?, ¿cómo vas a ver el menú (no sólo en ie7, sino en cualquier navegador) si tienes esto en tu estilo?:

Código HTML:

#menu_catalogos ul {		
	font-family: Arial, Helvetica, Verdana, sans-serif;
	font-size: 12px;
	font-weight: normal;
	list-style: none;
	float: left;
	padding:0px;
	text-align:left;
	color:#000; /*este color lo tienes en fff (blanco) sobre fondo blanco: ¿cómo se va a ver?*/
	margin:0 0 0 0;
}

Además tienes errores en la apertura y cierre de etiquetas, aquí arreglado:

Código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>INMOBILIARIO Y AMBIENTES</title>
<style type="text/css">
#menu_catalogos {
	margin:40px 0 0 6px;
	color:#fff;
	font-size: 13px;
	font-family: Arial, Helvetica, Verdana, sans-serif;
	font-weight:bold;
	list-style: none;
	text-align:center;
}
#menu_catalogos ul {		
	font-family: Arial, Helvetica, Verdana, sans-serif;
	font-size: 12px;
	font-weight: normal;
	list-style: none;
	float: left;
	padding:0px;
	text-align:left;
	color:#000; /*este color lo tienes en fff (blanco) sobre fondo blanco: ¿cómo se va a ver?*/
	margin:0 0 0 0;
}

#menu_catalogos a {
	display: block;
	width: 150px;
	color: #fff;
	text-decoration: none;
	text-align: center;
	padding: 0px;
	font-size: 12px;
}

#menu_catalogos li {
	float: left;
	padding: 0;
	margin-left: -1px;
	margin-bottom: -1px;
	width: 215px;
}

#menu_catalogos li ul { 
	position: absolute;
	left: -999em;
	height: auto;
	width: 215px;
	font-weight: normal;
	background:#000;
}

#menu_catalogos li li {
	
}

#menu_catalogos li ul a {
	text-align: left;
	padding: 2px;
}

#menu_catalogos li ul ul {
	margin-left: 185px;
	margin-top: -17px;
}

#menu_catalogos li:hover ul ul, #menu_catalogos li:hover ul ul ul, #menu_catalogos li.sfhover ul ul, #menu_catalogos li.sfhover ul ul ul {
	left: -999em;
}

#menu_catalogos li:hover ul, #menu_catalogos li li:hover ul, #menu_catalogos li li li:hover ul, #menu_catalogos li.sfhover ul, #menu_catalogos li li.sfhover ul, #menu_catalogos li li li.sfhover ul {
	left: auto;
}

#menu_catalogos li ul li:hover, #menu_catalogos li.sfhover {
	background:#999;
	font-weight:bold;
	border:1px solid #FFF;
}
</style>
</head>

<body>
<div id="boton_inmobiliarios" style="float:left">
        <div id="menu_catalogos">
			<ul>
				<li>INMOBILIARIO Y AMBIENTES</li>
				<li>Inmobiliario y Ambientes</li>
				<li>Malla y Guirnalda</li> 
				<li>Polybrite Luminaria Flujo</li> 
				<li>Polybrite M60 Decorativas</li> 
			</ul>
       </div>
</div>
</body>

</html>

Bye