Skip to Content »

Hack CSS para IE6 & IE7

  • 22/02/2008
  • 12:41 am
  • unijimpe

Uno de los problemas mas comunes al momento de implementar sitios web es la compatibilidad para los diferentes navegadores (Firefox, Internet Explorer 6, Internet Explorer 7, Safari, etc.), esto por que cada uno de estos interpreta de forma diferente las hojas de estilos. Ahora les presento un pequeño truco para hacer que un mismo estilo sea interpretado por cada browser en especifico.

Explicando en Hack
Normalmente cuando nombramos una propiedad de un estilo, este es interpretado por todos los navegadores, pero si anteponemos # se aplica a todos las versiones de Internet Explorer, además si utilizamos _ el estilo se aplicará a Internet Explorer 6, luego tendríamos:

  1. .mydiv {
  2.     height: 15px; /* Para todos los Browsers */
  3.     #height: 20px; /*Para Internet Explorer */
  4.     _height: 25px; /* Para Internet Explorer 6 */
  5. }

Con lo cual obtenemos un mismo estilo interpretado de forma distinta de acuerdo al browser que tengamos.

Ejemplo del Hack
Vamos a crear un pequeño ejemplo, en donde deseamos aplicarlo colores diferentes a las tipografías de acuerdo al browser. Azul para Firefox, Azul para IE7 y verde para IE6. Entonces nuestro estilo sería de la forma:

  1. body {
  2.     font-family: "Trebuchet MS", Tahoma, Verdana;
  3.     font-size: 12px;
  4.     color: #006699;
  5.     #color: #990000;
  6.     _color: #009933;
  7. }

Ahora si este estilo lo aplicamos a nuestra página tendríamos:

  3. <title>CSS Hacks</title>
  4. <style type="text/css">
  5. body {
  6.     font-family: "Trebuchet MS", Tahoma, Verdana;
  7.     font-size: 12px;
  8.     color: #006699;
  9.     #color: #990000;
  10.     _color: #009933;
  11. }
  12. </style>
  13. </head>
  15. <h5>CSS Hacks </h5>
  16. <p>Microsoft is slowly ...  compliant.</p>
  17. </body>
  18. </html>

Pueden ver el resultado de este ejemplo en: csshack.html, dependiendo del navegadores que utilicen verán el color de los textos. Finalmente si desean leer mas acerca de este tema pueden hacerlo con el autor original en Creating different CSS style selector definitions for different browsers (Firefox, Internet Explorer 7 and IE 6.0)

Posts Relacionados

Implementar Menu con CSS

  • 18/02/2008
  • 10:04 pm
  • unijimpe

Uno de los problemas mas comunes para un desarrollador es el crear una barra de menú, existen muchas formas, algunas con Javascript, otras no son compatibles con todos los navegadores y otras muy engorrosas de implementar. Esta vez les presento una forma elegante y sencilla de implementar un menú utilizando CSS.

menu-css.gif

El ejemplo original fue desarrollado en A List Apart en Suckerfish Dropdowns y modificado en cssMenus el cual nos ha dejado los archivos listos para utilizarlos.

Obteniendo los archivos
Este menú esta implementado en base a CSS y un pequeño Javascript que es hacerlo compatible con versiones inferiores de Internet Explorer. Para ello descargamos los archivos nav-h.js, nav-v.js, nav-h.css y nav-v.css desde http://qrayg.com/experiment/cssmenus/.

Creando la estructura del Menú
Lo primero es crear la estructura de nuestro menú, para ello haremos uso de listas, entonces por cada nivel de menú que deseamos crearemos una lista, de la siguiente forma:

  2.   <li><a href="#">Home</a></li>
  3.   <li><a href="#">Archivos</a></li>
  4.   <li><a href="#">Categorias</a>
  5.     <ul>
  6.       <li><a href="#">ActionScript</a></li>
  7.       <li><a href="#">JavaScript</a></li>
  8.       <li><a href="#">PHP</a></li>
  9.       <li><a href="#">MySQL</a></li>
  10.     </ul>
  11.   </li>
  12.   <li><a href="#">Foro</a></li>
  13.   <li><a href="#">Contactenos</a></li>
  14. </ul>

Menú Horizontal
Lo primero es adjuntar la hoja de estilos nav-h.css, el segundo paso es adjuntar el Javascript nav-h.js pero como solo se necesita que funcione con versiones antiguas de Internet Explorer le agregamos un condicional para que cargue. Finalmente a la lista principal le asignamos el id navmenu-h.

  3. <title>Menu CSS - unijimpe</title>
  4. <link rel="stylesheet" type="text/css" href="nav-h.css" />
  5. <!--[if gte IE 5.5]>
  6. <script type="text/javascript" src="nav-h.js"></script>
  7. <![endif]-->
  8. </head>
  10. <ul id="navmenu-h">
  11.   <li><a href="#">Home</a></li>
  12.   <li><a href="#">Archivos</a></li>
  13.   <li><a href="#">Categorias</a>
  14.     <ul>
  15.       <li><a href="#">ActionScript</a></li>
  16.       <li><a href="#">JavaScript</a></li>
  17.       <li><a href="#">PHP</a></li>
  18.       <li><a href="#">MySQL</a></li>
  19.     </ul>
  20.   </li>
  21.   <li><a href="#">Foro</a></li>
  22.   <li><a href="#">Contactenos</a></li>
  23. </ul>
  24. </body>
  25. </html>

Con lo cual obtenemos el resultado mostrado en: menucss-h.html.

Menú Vertical
En el caso del menú verticalse adjunta la hoja de estilos nav-v.css, luego se adjunta el Javascript nav-v.js y finalmente a la lista principal le asignamos el id navmenu-v.

  3. <title>Menu CSS - unijimpe</title>
  4. <link rel="stylesheet" type="text/css" href="nav-v.css" />
  5. <!--[if gte IE 5.5]>
  6. <script type="text/javascript" src="nav-v.js"></script>
  7. <![endif]-->
  8. </head>
  10. <ul id="navmenu-v">
  11.   <li><a href="#">Home</a></li>
  12.   <li><a href="#">Archivos</a></li>
  13.   <li><a href="#">Categorias</a>
  14.     <ul>
  15.       <li><a href="#">ActionScript</a></li>
  16.       <li><a href="#">JavaScript</a></li>
  17.       <li><a href="#">PHP</a></li>
  18.       <li><a href="#">MySQL</a></li>
  19.     </ul>
  20.   </li>
  21.   <li><a href="#">Foro</a></li>
  22.   <li><a href="#">Contactenos</a></li>
  23. </ul>
  24. </body>
  25. </html>

Con lo cual obtenemos el resultado mostrado en: menucss-v.html.

Solo quedaría como paso final modificar la hoja de estilos y seleccionar la tipografía, color, margenes y bordes que se adecuen a nuestro diseño.

Posts Relacionados

Centrar contenido con CSS

  • 09/12/2007
  • 9:45 pm
  • unijimpe

Uno de los problemas típicos es centrar horizontalmente y verticalmente contenido HTML utilizando CSS. Esto por que no es fácil conseguir posicionar verticalmente un elemento. Este truco lo leí en algún lugar pero lamentablemente no recuerdo donde así que me disculpo con el autor original de este método.

Centrando con CSS
La idea básica es utilizar posicionamiento absoluto y ubicar primero el contenido en el medio de la pantalla, luego le asignamos margen superior e izquierdo negativos en cantidades equivalentes a la mitad de las dimensiones del contenido que deseamos centrar. Luego si tenemos una imagen de 300x236 pixels de dimensiones tendríamos el CSS de la forma:

  1. #main {
  2.     width: 300px;
  3.     height: 236px;
  4.     position: absolute;
  5.     top: 50%;
  6.     left: 50%;
  7.     margin-top: -118px; /* 50% del alto*/
  8.     margin-left: -150px; /* 50% del ancho */
  9. }

Luego, incluimos la imagen dentro de un div llamado main, unimos el código y obtenemos la forma completa para el centrado.

  3. <title>Centrar con CSS - unijimpe</title>
  4. <style type="text/css">
  5. <style type="text/css">
  6. #main {
  7.     position: absolute;
  8.     top: 50%;
  9.     left: 50%;
  10.     margin-top: -118px;
  11.     margin-left: -150px;
  12.     width: 300px;
  13.     height: 236px;
  14. }
  15. </style>
  16. </head>
  18. <div id="main">
  19.     <img src="screenshot.png" width="300" height="236">
  20. </div>
  21. </body>
  22. </html>

Pueden ver el resultado de este ejemplo en: css-center-img.html.

Centrar SWFs con CSS
Podemos utilizar la misma técnica de centrado, para ello si utilizamos SWFObject, tendríamos el siguiente código al insertar un swf con dimensiones de 231x132 pixels.

  3. <title>Centrar con CSS - unijimpe</title>
  4. <script src="swfobject.js" type="text/javascript"></script>
  5. <style type="text/css">
  6. #main {
  7.     width: 231px;
  8.     height: 132px;
  9.     position: absolute;
  10.     top: 50%;
  11.     left: 50%;
  12.     margin-top: -66px;
  13.     margin-left: -115px;
  14. }
  15. </style>
  16. </head>
  18. <div id="main"></div>
  19. <script type="text/javascript">
  20. var so = new SWFObject("7762.swf","id","231","132","9","#FFF");
  21. so.write("main");
  22. </script>
  23. </body>
  24. </html>

Podemos ver el resultado en css-center-swf.html. Como ven muy sencillo y ademas es compatible con la mayoría de navegadores.

Posts Relacionados