[SOLUCIONADO] no me funciona el codigo css en ie8 ie7 y el ie6 no se si hay otro ie mas nuevo

[julslash]

tengo un menu que es muy dinamico

este es el codigo en el html

Código HTML:

<div class="menu_nav">
        <ul>
          <li class="active"><a href="index.html">Inicio</a></li>
          <li><a href="html/support.html">Quienes somos</a></li>
          <li><a href="html/about.html">Nuestros Productos</a></li>
          <li><a href="html/blog.html">Donde Ubicarnos</a></li>
          <li><a href="html/contact.php">Contactar</a></li>
        </ul>
        <div class="clr"></div>
      </div> 

este es el codigo css del menu

me funciona perfecto en firefox y todos los navegadores q se les ocurra menos en internet explorer como siempre algo tiene que dar error :s !!!

por favor ayuda!!!

Código:

 /* menu */
.menu_nav { 
float:left; 
width:auto;
}

.menu_nav ul { 
list-style:none;
margin:10px 0px 0px 0px;
}

.menu_nav ul li { 
margin:0 4px; 
float:left; 
}





.menu_nav ul li a { /* Border Radius */
	-webkit-border-radius: 15px;
	-moz-border-radius: 15px;
	border-radius: 15px;
	
	/* Border Shadow */
	-webkit-box-shadow: 1px 2px 2px rgba(0,0,0,0.6);
	-moz-box-shadow: 1px 2px 2px rgba(0,0,0,0.6);
	box-shadow: 1px 2px 2px rgba(23,90,206,0.6);
	
	
	/* Animation (Webkit, Gecko & Mozilla) */
	-webkit-transition-duration: 0.20s;
	-webkit-transition-timing-function: ease-out; 
	-moz-transition-duration: 0.20s;
	-moz-transition-timing-function: ease-out; 
	
	color: #ffffff;
	background: rgba(19,170,234,9);
	display: inline-block;
	padding: 5px 15px;
	outline: none;
	text-decoration: none;
	
	
	}



.menu_nav ul li.active a, .menu_nav ul li a:hover {
	color: #13B5EA;
	 background: rgba(255,255,255,5);
		padding: 5px 25px;
		}

[undakel]

CSS3 no funciona en internet explorer a no ser que sea la versión 9 o superior.

Por otro lado no explicas que problema tienes. Pero prueba con:

.menu_nav ul li {display: block; float: left; margin: 0 4px;}

[_franb]

imagino que lo que no funciona en ie son los estilos indicados con -webkit- y -moz-, es decir box-shadow, border-radius y transition.

-webkit- y -moz- son hack que se aplican para que los estilos sean tomados por navegadores específicos, en este caso por el motor Mozilla (Firefox) y el motor Webkit (Chrome y Safari son los más comunes).

Si buscas en google 'CSS hack' también encontrarás para las versiones de ie.

No obstante, con mucha dificultad lograrás sombras y border redondeados para ie7 e ie8 . Existe un hack llamado 'filter' con el cual podrías lograrlo, pero es 0 recomendable .
En mi caso siempre elijo que en esos navegadores no se vean esas propiedades y listo. Pero bueno, a veces uno no tiene opción y necesita aplicar un diseño al pie de la letra para todos los navegadores. Si es este tu caso, tal vez debas comenzar a probar con soluciones alternativas, como utilizar una imagen de fondo que posea el borde redondeado, y encimar capas para generar el efecto de sombreado .

Ahora bien, la propiedad 'transition' es mucho más complicada . Si fuera tu, para lograr la animación deseada, comenzaría a probar con javascript, probablemente con la libreria jquery.

Dos últimas acotaciones:
- Las propiedades 'box-shadow' y 'border-radius' no necesitan de hack para funcionar en las últimas versiones de Firefox, Safari, Chrome e ie9.

- Hace mucho dejé de usar hacks (excepto en casos extremos). Para la compatibilidad con diferentes navegadores prefiero utilizar un script de PHP.
Si te estás dedicando a la maquetación, tal vez quieras hecharle una mirada:
http://bastianallgeier.com/css_browser_selector/

ÉXITO! espero haber sido útil!

[julslash]

muchiiiiiisimas gracias!! bueno todos los dias se aprende algo nuevo!

aqui les dejo esta pagina para el que quiera utilizar una fuente distinta a las predeterminadas por css! funciona en todos los navegadores!

solo sube la fuente a esa web y te genera el código!!


http://www.fontsquirrel.com/fontface/generator