"Compatibilizar" mi menu CSS con IE6

[F.Y.N.]

Buenas...

Bueno, tal como dice el titulo necesito "parchar" mi sitio para que se vea bien con la porquería de Internet Explorer 6...

Así se ve con IE 7 y 8 (al igual que con el resto de los navegadores modernos):



En cambio con el maldito IE 6 (SP1) se ve así:



Ésta es mi pagina: http://tinyurl.com/2b7jyl9

Y éste el CSS del menu:

Código CSS:

#menu1
{
    height: 32px;
    text-shadow: #999 1px 1px 3px;
    background: url(estilo/bgs/bg3.jpg) repeat;
    margin: 0 auto;
}
#menu1 UL
{
    list-style: none;
}
#menu1 UL LI
{
    float: left;
    border-right: 2px groove #ccc;
    /*border-bottom: 2px solid #ccc;*/
}
#menu1 UL LI A
{
    text-align: center;
    padding: 5px;
    color: #666;
    display: block;
    font: 18px Tahoma;
    text-decoration: none;
    height: 22px;
}
#menu1 li ul {
    position: absolute;
    width: 5em;
    left: -999em;
}
#menu1 li ul li
{
    background: #FFF;
    border-left:1px solid #ccc;
    border-right:1px solid #ccc;
    border-bottom:1px solid #ccc;
    width: 7em;
    /*border-bottom: 2px solid #ccc;*/
}
#menu1 li ul li a
{
    font-size: 12px;
    height: auto;
}
#menu1 li:hover ul {
    left: auto;
}
#menu1 UL LI:hover A, #menu1 UL LI A:hover, #menu1 li:hover UL LI A:hover
{
    background: url(estilo/bgs/bg8.jpg) repeat;
    color: #666;
}
#menu1 li:hover ul li a{
    background: url(estilo/bgs/bg3.jpg) repeat;
}
 

No importa si hay que modificar una parte del CSS por completo sin conservar lo que tengo ahora y que se vea distinto (con tal que se vea bien o parecido). Con una función en PHP puedo cambiar la hoja de estilos según el navegador del usuario

Gracias de antemano...

Salu1+1

[joseomaker]

pues para que se vea bien en ie6,usa los mismos selectores,pero,copia la hoja de estilos,la copia la validas como CSS1 aca:

http://jigsaw.w3.org/css-validator/

y remplaza lo que salga invalido con las alternativas que te da el validador,guarda la copia que editastes con otro nombre y con esa funcion php que dices o con comentarios condicionales,haz que todos los navegadores utilizen la hoja de estilo original.

pero,haz que IE6 use la que pasastes a CSS1.

[mayid]

Con una función en PHP puedo cambiar la hoja de estilos según el navegador del usuario

Si? Me encantaría conocerla! Es que PHP se entera por sí solo del navegador que usamos o hay que enviarle información desde javascript?

[F.Y.N.]

Iniciado por joseomaker

pues para que se vea bien en ie6,usa los mismos selectores,pero,copia la hoja de estilos,la copia la validas como CSS1 aca:

http://jigsaw.w3.org/css-validator/

y remplaza lo que salga invalido con las alternativas que te da el validador,guarda la copia que editastes con otro nombre y con esa funcion php que dices o con comentarios condicionales,haz que todos los navegadores utilizen la hoja de estilo original.

pero,haz que IE6 use la que pasastes a CSS1.

Gracias... pero quede casi igual... Según el validador de CSS1 hay funciones de mi menú que no existen, por ejemplo ":hover" (que es lo principal) y no me da ninguna opción...

Iniciado por mayid

Si? Me encantaría conocerla! Es que PHP se entera por sí solo del navegador que usamos o hay que enviarle información desde javascript?

Se hace con "$_SERVER['HTTP_USER_AGENT']"... aquí hay un ejemplo.

Pero tú le tienes que dar el "mecanismo" para que cambie la hoja de estilos (que basicamente es if $navegador = "NAVEGADOR_X" {$CSS = hojaparaX.css}, y así, después en la parte donde va el link a tu hoja de estilos le pones "echo $css").

Salu1+1

[TheDark03]

Hola F.Y.N

lo q buscas se llama crossbrowsing (creo q se escribe asi) ahora para lograr q se ve bien en el IE6 necesitas corregir los bugs q presenta este browser ... y para tu mala suerte en el IE6 no funciona eso de

Código CSS:

li:hover{}
 

el hover solo funciona para la etiqueta <a href=...>

para solucionar este problema podrias crear un estilo para el elemento <a>como sabemos la etiqueta <a> solo involucra al texto o a la imagen q esta dentro de estas etiquetas ...

asi q a tu etiqueta <a> le darias un ancho y altura adecuada para q se asemeje a un bloque.. le tienes q dar por ejemplo

Código CSS:

a{padding-top:10px;padding-left:30px;padding-right:30px;padding-bottom:10px;}
 

como usas listas se deben de ver separadas este bug se corrige dejando un espacio antes de cerrar esta etiqueta... o tmb se corrige cuando le pones display:inline-block

Saludos DTB

[joseomaker]

Iniciado por F.Y.N.

Gracias... pero quede casi igual... Según el validador de CSS1 hay funciones de mi menú que no existen, por ejemplo ":hover" (que es lo principal) y no me da ninguna opción...




Se hace con "$_SERVER['HTTP_USER_AGENT']"... aquí hay un ejemplo.

Pero tú le tienes que dar el "mecanismo" para que cambie la hoja de estilos (que basicamente es if $navegador = "NAVEGADOR_X" {$CSS = hojaparaX.css}, y así, después en la parte donde va el link a tu hoja de estilos le pones "echo $css").

Salu1+1

lo de :hover es un selector,yo dije que validaras las propiedades que son las que entan dentro de {}

[Triby]

Mikmoro tiene en su web algunos ejemplos de este tipo de menus que funcionan hasta con IE6, puedes verlos en www.araudi.net