Problema headers en Mozilla

[hector_he]

Hola, hace varios días leí un post que decía que no era muy adecuado definir "font-size" en un header así pues lo que hice fue sacar esta etiqueta y así cada headers tuviese su tamaño definido, pero el problema es que en Mozilla disminuye considerablemente porque?

POr ejemplo se puede compravar (en el mismo site donde tengo el problema de las tres columnas...): www.pinkujisatsu.cjb.net

[floren]

Hola Héctor. Veo en tu CSS

Código HTML:

body {
font-size: 70%;
}

h1, h2, h3, h4, h5, h6{margin:0px;}
h2{
font-size: x-large; 
}

Prueba a darle un valor en px o em a tus fuentes.

Por otro lado el verificador CSS da un error en tu #profile

Propiedad no válida : text-align auto no es un valor de text-align : auto

Espero te sirva.

PD: ¿No tienes otro sitio público donde subir tus páginas, no? Es que con ese frame superior de publicidad es más difícil chequear tu código.

[hector_he]

Hola,
Lo primero muchas gracias por responder

La segunda, lo siento se me olvidó poner el código css...(¬¬)
Como dije, es correcto aplicar un font-size a un header? o hay que respetar ya el tamaño predeterminado que tengan?
EL h2 tiene un como prueba pero se muestra diferente también en Mozilla.
Gracias

Código:

/* font size control */
* {
padding: 0;
margin: 0;
z-index: 1;
}
body {
font-size: 70%;
}
img {
border: none;
}
html:first-child {
font-size:82%;
}

/* background height */
html {min-height: 100%;height: auto;}

BODY {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px; 
color:white;
margin: 6px 0px; 
text-align: center; 
background:#000000  url(images/bg.jpg) no-repeat bottom;
} 

a {color: #CCCCCC; text-decoration: none; background:transparent}
a:hover {color:#999999; text-decoration: none; background:transparent}

/* headers */
h1, h2, h3, h4, h5, h6{margin:0px;}
h2{
text-align:left;
margin-bottom:4px;
font-size: x-large; 
}
h3{ 
background-color:#FF0066; 
text-align:left; 
padding: 4px;
font-weight:bold;
color:white;
}
h4{
text-align:left;  
padding: 0px; 
margin-top:8px;
}
h5{
text-align:right;  
padding: 0px; 
margin:2px 0px 8px 0px;
}
h6{
font-weight:normal;
text-align:center;  
padding: 0px; 
margin:4px 0px;
}

/* div 2 columns*/
#container{
text-align: left; 
margin: auto;
padding: 0px;  
width:700px;
} 
#head{
width:700px; 
height:200px; 
margin-bottom: 6px;
text-align:center;
}
#body{
margin: 10px 0px;
padding:0px;
} 
#center{
width:404px; 
margin:0px 0px 14px 160px;
padding:0px;
}

/* div lateral right*/
#lateral{
text-align:left;
width: 110px;
float:right;
padding:8px;
margin-left:10px;
background:#FA6494 url(images/bgright.jpg) repeat-x top;
color:white;
}
#lateral ul{
margin:0px;
padding:0px;
list-style:none;
}
#lateral li{
padding:0px;
margin-bottom:14px;
display:block;
width: auto;
}

/* menu left */
#menu{
width:150px;
float:left;
background:#FA6494 url(images/bgmenu.jpg) no-repeat top;
text-align: left;
padding:6px 0px;
margin:0px;
color:white;
}
#menu ul {
margin:0px;
padding: 0px;
list-style-type: none;
}
#menu li { 
width:150px; 
height:auto; 
margin:2px 0px;
}
#menu a {
background-color:transparent;
color: white; 
font-size:14px; 
font-weight: bold;
text-decoration: none; 
padding: 6px 12px;
display: block;
}
#menu a:hover {
background:#FF6699 url(images/bgmenub.jpg) repeat center;
color:white;
}

/* menu profile */
#profile{
width:404px;
padding:0px;
margin:0px;
}
#profile ul {
margin:0px;
padding: 0px;
list-style-type: none;
}
#profile li {
display: inline;  
margin:0px;
padding:0px;
width:auto;
white-space:nowrap;
}

/* text style and list */
.text{
width:auto; 
margin-bottom:12px;
padding: 10px 12px; 
background:url(images/bgtext.jpg) repeat-y center;
}
.text ul{
margin:0px;
padding:0px;
}
.text li{
list-style:none;
margin:12px 0px;
padding:0px;
}

/* inline style list */
#center .inline{
font-size:12px;
text-align:center;
}
.inline{
margin:0px;
padding:0px;
font-size:9px;
}
.inline ul{
margin:0px;
padding:0px;
text-align:center;
}
.inline li{
list-style:none;
margin:0px;
padding:0px;
display:inline;
}
.inline li a{
margin:0px;
padding:0px;
}

/* credit class */
.credit{
font-size:10px;
text-align: right;
}

/* p style */
p {
line-height:20px;
margin:auto;
}

[floren]

Yo te sugería que sustituyeras el font-size: x-large; por font-size: 20px; o algo así.

[PascalC]

Hola, hace varios días leí un post que decía que no era muy adecuado definir "font-size" en un header así pues lo que hice fue sacar esta etiqueta y así cada headers tuviese su tamaño definido, pero el problema es que en Mozilla disminuye considerablemente porque?

Esta teoria de que no se debe cambiar el font-size es una tonteria porque:
1 Las CSS fueron creados precisamente para permitir este tipo de cambio
2 Lo que define un titulo puede ser el font-size... u otra cosa (color, subrayado, negrita, imagen o color de fondo, bordes distintos, alineación...)
3 Como lo puedes comprobar, los valores por defecto de los elementos HTML varian de un navegador a otro porque no existe ninguna norma que indique los valores por defecto si no hay hoja de estilo en el documento (hay unos valores de ejemplo en la norma HTML4 pero no son normativos, unicamente indicativos).

est codigo que usas :
body {
font-size: 70%;
}

Significa que el texto de referencia del body debe ser el 70% del valor por defecto indicado en las preferencias del navegador. Por ejemplo yo uso un tamaño de texto de 16px, lo que significa que veré texto de 11,2px de altura.

Cuidado con las medidas en % sobre body, causan bugs de rendimiento en IE6 cuando cambias el zoom de texto (por cierto asegurate que tienes el zoom de IE en el valor mediano).

Un método facil es usar un valor en pixeles para body y valores en em para el texto :

body {font-size: 12px;}
h1 {font-size: 1.6em;}
h2 {font-size: 1.5em;}
h3 {font-size: 1.4em;}
h4 {font-size: 1.3em;}
...

H2 tendria asi un tamaño de 18px.

[hector_he]

Ok, muchas gracias!

[JHMorales]

Hola:
los hn tienen un tamaño proporcional con respecto al tamaño de fuente que se especifique para la página. El problema es que ese tamaño proporcional es implementado por cada navegador de una manera diferente, por eso se ve más pequeño en unos que en otros.

Te recomiendoque uses estos valores:

/*tamaño apropiado para navegadores que siguen w3c*/
body {
font-size: 76%;
}

/*este es para opera*/
html:first-child {
font-size:82%;
}

/*este es para ie7*/
*:first-child+html {
font-size:82%;
}

/*este es para ie6 o inferior*/
*html h1,h2,h3,h4,p,li,ul {
font-size:92%;
}


Suerte, Jorge H.