El tag "header" no funciona bien en Firefox (HTML5)

junihh · #1 (**permalink**) 24/01/2011, 17:36

Hola señores

Estoy tratando de probar con HTML5 porque en las próximas semanas estaré involucrado en un proyecto dedicado a los móviles.

Estuve probando con la sección del site que va en HTML5 porque necesitaba ver que funciona bien sin anchos fijos (elástico). El primer problema que me encontré fué que el tag "header" funciona como debe en Safari y Chrome, pero se vuelve un desastre en Firefox y Opera. Pueden ver acá lo que me refiero.

Con CSS le aplico una altura fija, pero lamentablemente no me funciona en los navegadores que menciono. Es bastante molesto ese caso y no me gustaría tener que codear el site basado en HTML4. ¿Alguna idea sobre qué puedo estar haciendo mal?

sanxuan · #2 (**permalink**) 24/01/2011, 17:54

Mi modesta opinión es que deberías seguir usando HTML4.1+CSS2.1 hasta que la compatibilidad con HTML5+CSS3 sea real.
Algunas cosas son imposibles de hacer con el verdadero estándar actual. Otras se pueden hacer igual que antes.
La compatibilidad hacia adelante no existe. No puedes añadir las nuevas propiedades al antiguo código.
La compatibilidad hacia atrás se supone que estará asegurada al menos para un par de versiones del navegador.
Las páginas escritas en CSS2.1+HTML4.1 seguirán funcionando unos cuantos años. Las que estén escritas en HTML5+CSS3 puede que aún no funcionen en muchos equipos.

junihh · #3 (**permalink**) 24/01/2011, 18:37

Lo cierto es que si no logro conseguir respuesta, no lo pensaré dos veces para descartar HTML5. De todos modos muchos navegadores (incluyendo del BlackBerry y Nokia) funcionan bien con HTML4. Gracias por tu sugerencia.

alexk · #4 (**permalink**) 24/01/2011, 20:38

Las nuevas etiquetas HTML 5, necesitan la propiedad y valor de "display:block" ( para que, si como divs se tratasen), ademas que consiguiras mayor compatibilidad con XHTML que con HTML 4.

junihh · #5 (**permalink**) 25/01/2011, 06:39

@alexk

Funcionó a la perfección con "display:block;" Es lo que habituo a usar con los "span" y "a" cuando quiero que se porten como div's, pero no había pensado en la misma posibilidad para los nuevos tags de HTML5. Por cierto, siempre uso XHTML Transitional para HTML, pero por razones obvias de HTML5, hay cosas que me confunden.

Muchísimas gracias por tu respuesta, me sirvió de mucho.

rogertm · #6 (**permalink**) 25/01/2011, 15:29

Cuando hace unos días salió la página del Logo de HTML5, me dediqué a mirar en el código para ver como lo manejan, pues soy de los que aprueba 100% el uso de HTML5 y vi que usan modernizr, una librería en js, tal vez eso te ayude a estructurar mejor la página.

No he tenido tiempo de ver exactamente como funciona, pero creo que te agrega al tag html código nativo de CSS3 y HTML5:

Código HTML:

Ver original/*
 * Modernizr is a script that detects native CSS3 and HTML5 features
 * available in the current UA and provides an object containing all
 * features with a true/false value, depending on whether the UA has
 * native support for it or not.
 * 
 * Modernizr will also add classes to the <html> element of the page,
 * one for each feature it detects. If the UA supports it, a class
 * like "cssgradients" will be added. If not, the class name will be
 * "no-cssgradients". This allows for simple if-conditionals in your
 * CSS, giving you fine control over the look & feel of your website.
 * 
 * @author        Faruk Ates
 * @author        Paul Irish
 * @copyright     (c) 2009-2010 Faruk Ates.
 * @contributor   Ben Alman
 */

http://www.w3.org/html/logo/js/modernizr.js

Saludos

junihh · #7 (**permalink**) 26/01/2011, 06:38

@rogertm

No recuerdo cuándo leí sobre Modernizr, pero fué gracias a un enlace de Twitter. La verdad no recordaba de esa utilidad y en aquel momento me impresionó.

Gracias por recordarmelo viejo, porque ahora que voy HTML5 creo que es el momento para probarlo. Por el momento estaba aplicando "html5.js" y como que no me sentia muy confiado de su funcionalidad.

rogertm · #8 (**permalink**) 26/01/2011, 12:34

Anoche me dediqué a echarle un ojo al asunto, y está sencillamente genial, pues puedes llegar a un nivel de detalla super profundo.

Es cuestión de llamar el script y al tag <html> de tu sitio le agregas la clase no-js, entonces te devolverá diferentes clases, dependiendo de el navegador, por ejemplo, si el navegador del cliente soporta la etiqueta <video>, entonces se generará la clase video, si no, la clase generada será no-video, lo que queda es por parte del desarrollador, pues tienes la opción de crear dos estilos css, .video y .no-video, y en el navegador se mostrará el estilo que convenga.

Es como crear if´s en css