Foros del Web » Creando para Internet » CSS »

"Compatibilizar" mi menu CSS con IE6

Estas en el tema de "Compatibilizar" mi menu CSS con IE6 en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 23/08/2010, 22:46
Avatar de F.Y.N.
Colaborador
 
Fecha de Ingreso: noviembre-2006
Ubicación: En un acorde de LA menor
Mensajes: 5.807
Antigüedad: 11 años
Puntos: 116
Exclamación "Compatibilizar" mi menu CSS con IE6

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:
Ver original
  1. #menu1
  2. {
  3.     height: 32px;
  4.     text-shadow: #999 1px 1px 3px;
  5.     background: url(estilo/bgs/bg3.jpg) repeat;
  6.     margin: 0 auto;
  7. }
  8. #menu1 UL
  9. {
  10.     list-style: none;
  11. }
  12. #menu1 UL LI
  13. {
  14.     float: left;
  15.     border-right: 2px groove #ccc;
  16.     /*border-bottom: 2px solid #ccc;*/
  17. }
  18. #menu1 UL LI A
  19. {
  20.     text-align: center;
  21.     padding: 5px;
  22.     color: #666;
  23.     display: block;
  24.     font: 18px Tahoma;
  25.     text-decoration: none;
  26.     height: 22px;
  27. }
  28. #menu1 li ul {
  29.     position: absolute;
  30.     width: 5em;
  31.     left: -999em;
  32. }
  33. #menu1 li ul li
  34. {
  35.     background: #FFF;
  36.     border-left:1px solid #ccc;
  37.     border-right:1px solid #ccc;
  38.     border-bottom:1px solid #ccc;
  39.     width: 7em;
  40.     /*border-bottom: 2px solid #ccc;*/
  41. }
  42. #menu1 li ul li a
  43. {
  44.     font-size: 12px;
  45.     height: auto;
  46. }
  47. #menu1 li:hover ul {
  48.     left: auto;
  49. }
  50. #menu1 UL LI:hover A, #menu1 UL LI A:hover, #menu1 li:hover UL LI A:hover
  51. {
  52.     background: url(estilo/bgs/bg8.jpg) repeat;
  53.     color: #666;
  54. }
  55. #menu1 li:hover ul li a{
  56.     background: url(estilo/bgs/bg3.jpg) repeat;
  57. }

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
__________________
ATi se te nota la nvidia...
  #2 (permalink)  
Antiguo 23/08/2010, 23:30
Avatar de joseomaker  
Fecha de Ingreso: junio-2010
Ubicación: Maracaibo
Mensajes: 314
Antigüedad: 7 años, 6 meses
Puntos: 22
Respuesta: "Compatibilizar" mi menu CSS con IE6

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.
  #3 (permalink)  
Antiguo 25/08/2010, 11:21
Avatar de mayid
Colaborador
 
Fecha de Ingreso: marzo-2009
Ubicación: BsAs
Mensajes: 4.014
Antigüedad: 8 años, 8 meses
Puntos: 101
Respuesta: "Compatibilizar" mi menu CSS con IE6

Cita:
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?
  #4 (permalink)  
Antiguo 25/08/2010, 13:21
Avatar de F.Y.N.
Colaborador
 
Fecha de Ingreso: noviembre-2006
Ubicación: En un acorde de LA menor
Mensajes: 5.807
Antigüedad: 11 años
Puntos: 116
Respuesta: "Compatibilizar" mi menu CSS con IE6

Cita:
Iniciado por joseomaker Ver Mensaje
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...


Cita:
Iniciado por mayid Ver Mensaje
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
__________________
ATi se te nota la nvidia...
  #5 (permalink)  
Antiguo 25/08/2010, 17:44
 
Fecha de Ingreso: mayo-2010
Ubicación: Lima, Peru.
Mensajes: 176
Antigüedad: 7 años, 6 meses
Puntos: 6
Respuesta: "Compatibilizar" mi menu CSS con IE6

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:
Ver original
  1. 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:
Ver original
  1. 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

Última edición por TheDark03; 25/08/2010 a las 18:01
  #6 (permalink)  
Antiguo 26/08/2010, 10:49
Avatar de joseomaker  
Fecha de Ingreso: junio-2010
Ubicación: Maracaibo
Mensajes: 314
Antigüedad: 7 años, 6 meses
Puntos: 22
Mensaje Respuesta: "Compatibilizar" mi menu CSS con IE6

Cita:
Iniciado por F.Y.N. Ver Mensaje
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 {}
  #7 (permalink)  
Antiguo 27/08/2010, 12:41
Avatar de Triby
Mod on free time
 
Fecha de Ingreso: agosto-2008
Ubicación: $MX->Gto['León'];
Mensajes: 9.741
Antigüedad: 9 años, 4 meses
Puntos: 2113
Respuesta: "Compatibilizar" mi menu CSS con IE6

Mikmoro tiene en su web algunos ejemplos de este tipo de menus que funcionan hasta con IE6, puedes verlos en www.araudi.net
__________________
- León, Guanajuato
- GV-Foto

Etiquetas: Ninguno
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:24.