CSS sopla mi mente

  • SpooF
  • ٩๏̯͡๏۶
  • Bronze Member
  • Avatar de Usuario
  • Registrado: May 22, 2004
  • Mensajes: 3415
  • Loc: Richland, WA
  • Status: Offline

Nota Enero 22nd, 2010, 4:21 pm

Bien, Im trabajando actualmente en un sitio web. Para la navegación principal Tuve algunos vuelco vínculos de trabajo, cambios de color de fondo simple. Bien en IE que no se muestran correctamente, así que decidí sólo eliminar el código y añadir un comentario, si para una nueva hoja de estilos.

Código: [ Select ]
<link href="style.css" rel="stylesheet" type="text/css">
    <!--[if IE]>
    <link href="style_ie.css" rel="stylesheet" type="text/css">
    <![endif]-->
  1. <link href="style.css" rel="stylesheet" type="text/css">
  2.     <!--[if IE]>
  3.     <link href="style_ie.css" rel="stylesheet" type="text/css">
  4.     <![endif]-->

Me fui a probar esto en la vista previa del navegador Internet Explorer dentro de Aptana. Para mi sorpresa el traspaso enlaces por arte de magia empezó a trabajar después de añadir la nueva hoja de estilo en la declaración del caso. Esto me confundió al principio, porque la hoja de estilo que se supone que añadir, si el navegador es decir, no tiene el código para hacer el roll off (Técnicamente, aún tiene el código para el roll off, porque Ive ya lo incluyó en el primer estilo hoja), pero aún! Se comenzó a trabajar. Hice algunas pruebas, me quita el comentario y si dejaba de funcionar, y la pantalla se rompió en otros navegadores, como el cromo y FF. Entonces me decidí a simplemente quitar la hoja de estilos segundo y volver a mi primero. Ahora se trabaja en ambas IE, Chrome y FF. Im básicamente de nuevo a que se comenzó, pero todo parece estar funcionando...Im adivinar hay alguna caché mágico que trabajan aquí. Malos borrar la caché del navegador y ver qué pasa. Si eso falla malos puesto el código en línea y dejar que ustedes probarlo así que no me volvería loco.
#define NULL (::rand() % 2)
  • Anonymous
  • Bot
  • No Avatar
  • Registrado: 25 Feb 2008
  • Mensajes: ?
  • Loc: Ozzuland
  • Status: Online

Nota Enero 22nd, 2010, 4:21 pm

  • SpooF
  • ٩๏̯͡๏۶
  • Bronze Member
  • Avatar de Usuario
  • Registrado: May 22, 2004
  • Mensajes: 3415
  • Loc: Richland, WA
  • Status: Offline

Nota Enero 22nd, 2010, 4:32 pm

Vale, me aclaró mi caché para todos mis navegadores y de su trabajo y aún no tengo ni idea por qué, porque la misma hoja de estilo que se utiliza cuando se rompe. Si alguien podía mirar a esta página y dime si la navegación bajo la bandera está mostrando que sería genial!

http://tke.travisperson.com/
#define NULL (::rand() % 2)
  • mindfullsilence
  • Professor
  • Professor
  • Avatar de Usuario
  • Registrado: Ago 04, 2008
  • Mensajes: 846
  • Status: Offline

Nota Enero 22nd, 2010, 5:53 pm

no funciona para IE6 o IE7

Obras en el cromo, FF3.5.

Sin embargo, lo hizo escribir mal una de sus propiedades:
CSS Código: [ Select ]
ul.inline_block li:hover
{
    padding: 0px;
    display:inline-block;
    backgrond-color: #6a6a6a;
}
 
  1. ul.inline_block li:hover
  2. {
  3.     padding: 0px;
  4.     display:inline-block;
  5.     backgrond-color: #6a6a6a;
  6. }
  7.  


backgr o ND-color no tiene una "U" en ella.

Además, por lo que tengo entendido, IE6 no entiende "inline-block", como una propiedad de pantalla. Yo generalmente sólo el sistema se los "display: block", les da un ancho, y luego "float: left" para evitar que entre navegadores compatibles. El siguiente parecía funcionar bien cuando he probado:
CSS Código: [ Select ]
UL.inline_block LI {
    TEXT-ALIGN: center;
    WIDTH: 90px;
    DISPLAY: block;
    FLOAT: left;
}
UL.inline_block LI:hover {
    backgrond-color: #6a6a6a
}
 
  1. UL.inline_block LI {
  2.     TEXT-ALIGN: center;
  3.     WIDTH: 90px;
  4.     DISPLAY: block;
  5.     FLOAT: left;
  6. }
  7. UL.inline_block LI:hover {
  8.     backgrond-color: #6a6a6a
  9. }
  10.  


El único problema con esto es que usted no podrá ver el estado hover en IE6, porque IE6 sólo entienden la clase de pseudo ": hover" cuando se aplica a "a" tags. La mejor manera de solucionar este problema es definir el css de la siguiente manera:
CSS Código: [ Select ]
UL.inline_block LI {
    TEXT-ALIGN: center;
    WIDTH: 90px;
    DISPLAY: block;
    FLOAT: left;
}
 
UL.inline_block LI a {
    display: block;
    width: 100%;
}
 
UL.inline_block LI a:hover {
    background-color: #6a6a6a;
}
 
  1. UL.inline_block LI {
  2.     TEXT-ALIGN: center;
  3.     WIDTH: 90px;
  4.     DISPLAY: block;
  5.     FLOAT: left;
  6. }
  7.  
  8. UL.inline_block LI a {
  9.     display: block;
  10.     width: 100%;
  11. }
  12.  
  13. UL.inline_block LI a:hover {
  14.     background-color: #6a6a6a;
  15. }
  16.  
Use your words like arrows to shoot toward your goal.
  • SpooF
  • ٩๏̯͡๏۶
  • Bronze Member
  • Avatar de Usuario
  • Registrado: May 22, 2004
  • Mensajes: 3415
  • Loc: Richland, WA
  • Status: Offline

Nota Enero 22nd, 2010, 6:46 pm

Awesome, gracias.
#define NULL (::rand() % 2)

Publicar Información

  • Total de mensajes en este tema: 4 mensajes
  • Usuarios navegando por este Foro: No hay usuarios registrados visitando el Foro y 78 invitados
  • No puede abrir nuevos temas en este Foro
  • No puede responder a temas en este Foro
  • No puede editar sus mensajes en este Foro
  • No puede borrar sus mensajes en este Foro
  • No puede enviar adjuntos en este Foro
 
 

© 2011 Unmelted, LLC. Ozzu® es una marca registrada de Unmelted, LLC