Firefox y Chrome memuestran h2 más grande que h1

reethok · #1 (**permalink**) 02/05/2013, 06:48

Por qué Firefox y Chrome muestran <h2></h2> más grande que <h1></h1>?

Según yo, mi código no está mal :S

¿Qué es lo que sucede? xD

Código HTML:

Ver original<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="utf-8">
    <meta name="description" content="Ejemplo de HTML5">
    <meta name="keywords" content="HTML5, CSS3, Javascript">
    <title>Prueba de HTML5</title>
    <link rel="stylesheet" href="miestilo.css">
</head>
 
<body>
    <header>
        <h1>Este es el título principal del sitio web</h1>  
    </header>
    <nav>
        <ul>
            <li>principal</li>
            <li>fotos</li>
            <li>videos</li>
            <li>contactos</li>      
        </ul>   
    </nav>
    <section>
        <article>
            <header>
                <hgroup>
                    <h1>Título del mensaje 1</h1>
                    <h2>Subtítulo del mensaje 1</h2>
                </hgroup>
            </header>   
            Este es mi primer mensaje
            <footer>
                <p>comentarios (0)</p>          
            </footer>
        </article>
        <article>
            <header>
                <hgroup>
                    <h1>Título del mensaje 2</h1>
                    <h2>Subtítulo del mensaje 2</h2>
                </hgroup>
            </header>
            Este es mi segundo mensaje      
            <footer>
                <p>comentarios (0)</p>          
            </footer>
        </article>
    </section>  
    <aside>
        <blockquote>Mensaje número 1</blockquote>   
        <blockquote>Mensaje número 2</blockquote>
    </aside>
    <footer>
        Derechos reservados &copy; 2012-2013    
    </footer>   
    
</body>
</html>

Triby · #2 (**permalink**) 02/05/2013, 09:26

Seguramente en miestilo.css tienes reglas que son las causantes del "error".

reethok · #3 (**permalink**) 02/05/2013, 13:17

Pero miestilo.css aún no existe. Y si borro el link, sale igual.

Acabo de hacer unas pruebas y al parecer al usar la etiqueta:

Código HTML:

Ver original<section> </section>

hace que los niveles de h no funcionen correctamente, probé haciendo esto:

Código HTML:

Ver original<body>
   <section>
      <h1>Esto es nivel h1</h1>
      <h2>Esto es nivel h2</h2>
      <h3>Esto es nivel h3</h3>
      <h4>Esto es nivel h4</h4>
      <h5>Esto es nivel h5</h5>
      <h6>Esto es nivel h6</h6>
   </section>
</body>

Y tanto chrome como firefox muestran h1 y h2 exactamente igual, pero si borro la etiqueta section, se muestra todo correctamente.

Agh, no sé qué hacer. ¿Qué estará sucediendo? ¿No debo usar la etiqueta section?, porque me parecería una pésima solución.

Saludos.

Triby · #4 (**permalink**) 02/05/2013, 14:06

Pues eso lo vas a solucionar al crear los estilos... o no?

ryugen · #5 (**permalink**) 02/05/2013, 17:01

Al ponerlos dentro de un elemento section Firefox 20 le aplica el siguiente estilo del sistema (un estilo CSS que no se puede evitar aplicar, al que debes sobre-escribir):

Código CSS:

Ver originalh2, *:-moz-any(article, aside, nav, section) h1 {
    display: block;
    font-size: 1.5em;
    font-weight: bold;
    margin: 0.83em 0;
}

Como vemos el h2 y cualquier h1 dentro de un aside, section, article y nav tendrán el mismo estilo.

En el caso del Google Chrome es similar, se aplica el siguiente estilo en una user agent stylesheet

Código CSS:

Ver original:-webkit-any(article,aside,nav,section) h1 {
font-size: 1.5em;
-webkit-margin-before: 0.83em;
-webkit-margin-after: 0.83em;
}

Estos valores pueden verse desde el Web Developer Tools (Google Chrome) o desde el Firebug (pestaña "Estilo", en el depegable activar "Mostrar CSS del user agent")

Saludos

emprear · #6 (**permalink**) 02/05/2013, 17:03

Cita:

Iniciado por reethok

Pero miestilo.css aún no existe. Y si borro el link, sale igual.

Acabo de hacer unas pruebas y al parecer al usar la etiqueta:

Código HTML:

Ver original<section> </section>

hace que los niveles de h no funcionen correctamente, probé haciendo esto:

Código HTML:

Ver original<body>
   <section>
      <h1>Esto es nivel h1</h1>
      <h2>Esto es nivel h2</h2>
      <h3>Esto es nivel h3</h3>
      <h4>Esto es nivel h4</h4>
      <h5>Esto es nivel h5</h5>
      <h6>Esto es nivel h6</h6>
   </section>
</body>

Y tanto chrome como firefox muestran h1 y h2 exactamente igual, pero si borro la etiqueta section, se muestra todo correctamente.

Agh, no sé qué hacer. ¿Qué estará sucediendo? ¿No debo usar la etiqueta section?, porque me parecería una pésima solución.

Saludos.

En html5 la relevancia de los h1 está dada por el posible anidamiento de otros section (creo que con el resto de las etiquetas semánticas pasa lo mismo), mientras que el renderizado del h2 es igual al del h1

Si mirás esteejmpo te vas a dar cuenta

Código:

<!DOCTYPE html>
<html lang="es-ar">
<head>
<meta charset="utf-8" />
<title>Html5</title>
</head>
<body>
<section>
    <h1>h1BBBBBBBB</h1>
    <h2>h2BBBBBBBB</h2>
	<section>
	    <h1>h1BBBBBBBB</h1>
	    <h2>h2BBBBBBBB</h2>
		<section>
	    <h1>h1BBBBBBBB</h1>
	    <h2>h2BBBBBBBB</h2>
	       	<section>
	    	<h1>h1BBBBBBBB</h1>
	    	<h2>h2BBBBBBBB</h2>   	
	    		<section>
	    		<h1>h1BBBBBBBB</h1>
	    		<h2>h2BBBBBBBB</h2>				
					<section>
	    			<h1>h1BBBBBBBB</h1>
	    			<h2>h2BBBBBBBB</h2>
					</section>			
				</section>
			</section>
		</section>	
	</section>
</section>
</body>
</html>

Recordá que todo esto tiene un caracter semántico y no visual, para eso el css
Saludos