Compatibilidad de CSS con IE 6 !

[Intersys]

Hola webmasters.
Ok me encontre con el problema de que mi menu css no funciona en ie6 (entre otras cosas)

Quiero saber si em ayudan a modificar el codigo para hacerlo compatible:

<div id="menues">

<ul> <li class="nivel1 primera" style="border-top:2px #9ac1c3 solid"><a href="#" class="nivel1">Cont</a>

<!--[if lte ie 6]><a href="#" class="nivel1ie">opción 1<table class="falsa"><tr><td><![endif]-->

<ul class="nivel2"><li class="primera" style="border-top:2px #9ac1c3 solid">
</li><li><a href="#">Reg</a></li>

<!--[if lte ie 6]></td></tr></table></a><![endif]--> </li>


<li class="nivel1 primera"><a href="#" class="nivel1">Ba</a>

<!--[if lte ie 6]><a href="#" class="nivel1ie">L<table class="falsa"><tr><td><![endif]-->

<ul class="nivel2">
<li class="primera" style="border-top:2px #9ac1c3 solid"><a href="#">Pres</a></li>

<!--[if lte ie 6]></td></tr></table></a><![endif]--> </li>

CSS:

* {
padding: 0px;
outline: 0;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
}
html, body { width: 100%;}
body {
font-family: Verdana, arial,
helvetica, sans-serif;
height: inherit;
background-image: url(fondo.jpg);
}

#menues {
font-size: 0.7 em;
width: 225px;
float: left;
margin-top: 10px;
margin-right: 5px;
margin-bottom: 10px;
margin-left: 0px;
}
#menues ul { list-style-type: None;}
#menues ul li.nivel1 { width: 220px;}
#menues ul li { text-align: Center;}
#menues ul li.primera { border-top: Solid 1px #fff;}

#menues ul li a {display: Block;text-decoration: None;color:
#000;background-color: #e6ecee;border: Solid 2px #9ac1c9;border-top: None;
padding: 8px 8px 9px;position: Relative;font-weight:bold;font-size:12px;
text-align:left;display:block;}

#menues ul li:hover {position: Relative;background-color: #399;color: #000;}
#menues ul li a:hover,
#menues ul li:hover a.nivel1 {background-color: #D2DFE3;
color: #000;position: Relative;}
#menues ul li a.nivel1 {display: Block!important;display: None;
position: Relative;}
#menues ul li ul {display: None;}
#menues ul li:hover > ul {display: Block;position: Absolute;left: 220px;
top:-1px;}


#menues ul li ul li a {width: 220px;background-color: #E6ECEE;
color: #000;position: Relative;}
#menues ul li ul li a:hover {position: Relative;background-color: #D7DFE2;
color: #000;}

#menues ul li a.nivel1ie {width: 220px;padding: 0px;}

#menues ul li a.subnivel {padding-bottom: 8px;}
#menues ul li a:hover ul.nivel2,
#menues ul.nivel2 li a:hover ul.nivel3,
#menues ul.nivel3 li a:hover ul.nivel4 {display: Block;position: Absolute;
left: 238px;top:-1px;}
table.falsa {border-collapse:collapse;border:0px;
float: Left;}


#col {margin: 0px;padding: 0px; outline: 0; height:100%}

[Intersys]

Nada ¿? Algun consejo?

[ArturoGallegos]

me suena a que quisiste hacer un menú como los de mikmoro que son desplegables y compatibles con IE6

revisalos y en su código fuente encontraras tu respuesta

-> clic aquí

¿en tu caso vale la pena dar soporte a IE6 o a sido por solicitud del cliente?

[Intersys]

Gracias por responder.
Realmente no tiene sentido, pero es por pedido y el cliente manda.
Solo quisiera modificar el menu y no cambiarlo, modificar el css ya que tengo toda una estructura armada.

muchas gracias lo voy a analizar para ver que se puede modificar.
De todas formas si identificas la propiedad que no me esta tomando el ie6 decime :)

[ArturoGallegos]

la propiedad hover en IE6 falla al aplicarse a un <li> es por eso que no se despliega... tu has tomado un menú de mikmoro y has borrado código que era necesario para que funcionara en IE6 supongo pensaste que no servia y era innecesario.

y lo se por esta ultima linea de tu css

Código CSS:

table.falsa {border-collapse:collapse;border:0px;float: Left;}
 

y la seccion que tu has borrado es esta

<!--[if lte IE 6]><a href="#" class="nivel1ie">Opción 1<table class="falsa"><tr><td><![endif]-->

note lo que marque en rojo.

mira el código fuente de cualquier menú del enlace que te pase anteriormente.

[rossijona]

Otra opción es que uses un poco de Javascript.

un ejemplo:

Código HTML:

<ul id="menu">
<li><a href="#" onmouseover="getElementById('sub').style.display='block';" onmouseout="getElementById('sub').style.display='none';">enlace</a>
<ul id="sub">
<li>asdasdasdasdas</li>
<li></li>
<li></li>
<li></li>
</ul>
</li>
</ul> 

eso seguro funciona, pruebalo, (hay que tener javascript habilitado, hoy en día se hace casi todo con javascript, el que no lo tiene habilitado esta muerto.)

SALUDOS

[Intersys]

Muchas gracias a los 2 por las respuestas, ahora me estoy por ir del trabajo pero el lunes a primera hora meto mano a esto y les comento como me fue!

[alexk]

http://www.forosdelweb.com/f53/hacer...0/#post3879993

[jomaruro]

Hola:

Iniciado por rossijona

(hay que tener javascript habilitado, hoy en día se hace casi todo con javascript, el que no lo tiene habilitado esta muerto.)

Sobretodo si te importa un pito la accesibilidad ¿no?

Saludos.

[rossijona]

Iniciado por jomaruro

Hola:



Sobretodo si te importa un pito la accesibilidad ¿no?

Saludos.

El único navegador que me a pasado de que viene con javascript deshabilitado es.. adivinen quien? jajajaj

[Intersys]

Esto me esta complicando jaja.
Ok les comento analice los codigos del ejemplo maestro y es un poco diferente al mio, intente adaptarlo y logre alinear un poco pero sigo sin lograr que funcione correctamente.

Opte por la opcion del css y no del Js.
Pero arriba me corrigieron que me faltaba el codigo [if IE] pero si lo tengo puesto.
Lo tenia como lte6 pero ahora lo puse IE como para que funcione si o si.

Acomode la clase falsa

table.falsa {border-collapse:collapse;border:0px;
float: Left; position: relative;}

Hasta intente añadiendo un js por las dudas de unas librerias que decian cargar propiedades para comodar

<!--[if lt IE 9]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
<![endif]-->

Pero tampoco funciono..


Añadi en head

<!--[if IE]><style>#menu ul li span.nivel1 {display: none;}#menu ul li.nivel1 {margin-bottom:-1px}#menu ul li a:active ul {margin-bottom: 1px;}</style><![endif]-->

Como indica el ejemplo maestro pero con eso tampoco se acomoda.

Es decir queda un espacio entre el menu inicial y los sumenus (un centimetro) que no me permite llevar el raton hacia arriba del submenu para usarlo. (en ese centimetro vacio se pierde el link del submenu y este se contrae)




Y el otro error que encuentro es que los submenus aparecen correctamente , pero el menu inicial me aparece mas chico de lo que deberia ser (la caja del texto cone l link no tiene la altura deseada.)

[rossijona]

A darle duro con Google Chrome para ir variando la posición del submenu, mucha suerte!

(inspeccionar elemento)

[Intersys]

El problema es que chrome me lo muestra perfecto! jeje
No tengo que cambiar nada en Chrome. y no tiene para inspeccionar el ie6 -.-

[BloodShadow]

Recomendacion, mira como haces para convencer a tu cliente que el IE 6 ya no existe... te dejo esta web para que puedas tratar de convencerlo:

http://www.cristalab.com/blog/estadi...-2011-c93929l/

Si te fijas 35.93% de las personas usan las versiones de IE... y de ese 35.93%... el 10.26% usan el IE 6 osea, si lees al final de esa pagina que te doy... dice

Sí, IE6 está muerto. Ese 10% es el del 50%, lo que significa que sólo el 5% de los usuarios usan IE6 y pueden ser ignorados. Señores, lo logramos.

[jomaruro]

Hola:

Iniciado por Intersys

Es decir queda un espacio entre el menu inicial y los sumenus (un centimetro) que no me permite llevar el raton hacia arriba del submenu para usarlo. (en ese centimetro vacio se pierde el link del submenu y este se contrae)

Pues utiliza comentarios condicionales IE6 para variar esa posición con padding/margin.

Saludos.