Foros del Web » Creando para Internet » CSS »

Ayuda con compatibilidad para IE7

Estas en el tema de Ayuda con compatibilidad para IE7 en el foro de CSS en Foros del Web. 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. ...
  #1 (permalink)  
Antiguo 19/08/2009, 14:49
 
Fecha de Ingreso: mayo-2009
Mensajes: 3
Antigüedad: 8 años, 6 meses
Puntos: 0
Ayuda con compatibilidad para IE7

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
  #2 (permalink)  
Antiguo 21/08/2009, 13:00
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: Ayuda con compatibilidad para IE7

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.

  #3 (permalink)  
Antiguo 21/08/2009, 13:27
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Ayuda con compatibilidad para IE7

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
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #4 (permalink)  
Antiguo 21/08/2009, 18:50
Avatar de deirdre  
Fecha de Ingreso: mayo-2009
Mensajes: 690
Antigüedad: 8 años, 7 meses
Puntos: 44
Respuesta: Ayuda con compatibilidad para IE7

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
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:17.