Foros del Web » Creando para Internet » CSS »

Problema headers en Mozilla

Estas en el tema de Problema headers en Mozilla en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 10/05/2007, 07:10
Avatar de hector_he  
Fecha de Ingreso: agosto-2006
Ubicación: Barcelona
Mensajes: 207
Antigüedad: 11 años, 3 meses
Puntos: 4
Problema headers en Mozilla

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
  #2 (permalink)  
Antiguo 11/05/2007, 03:12
Avatar de floren  
Fecha de Ingreso: febrero-2005
Ubicación: Málaga
Mensajes: 134
Antigüedad: 12 años, 10 meses
Puntos: 0
Re: Problema headers en Mozilla

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.
  #3 (permalink)  
Antiguo 12/05/2007, 06:39
Avatar de hector_he  
Fecha de Ingreso: agosto-2006
Ubicación: Barcelona
Mensajes: 207
Antigüedad: 11 años, 3 meses
Puntos: 4
Re: Problema headers en Mozilla

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;
}
  #4 (permalink)  
Antiguo 14/05/2007, 00:31
Avatar de floren  
Fecha de Ingreso: febrero-2005
Ubicación: Málaga
Mensajes: 134
Antigüedad: 12 años, 10 meses
Puntos: 0
Re: Problema headers en Mozilla

Yo te sugería que sustituyeras el font-size: x-large; por font-size: 20px; o algo así.
  #5 (permalink)  
Antiguo 18/05/2007, 20:49
 
Fecha de Ingreso: agosto-2003
Mensajes: 499
Antigüedad: 14 años, 3 meses
Puntos: 1
Re: Problema headers en Mozilla

Cita:
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.
__________________
Plaza Mozilla
http://www.chevrel.org/es/noticias/
  #6 (permalink)  
Antiguo 25/05/2007, 20:40
Avatar de hector_he  
Fecha de Ingreso: agosto-2006
Ubicación: Barcelona
Mensajes: 207
Antigüedad: 11 años, 3 meses
Puntos: 4
Re: Problema headers en Mozilla

Ok, muchas gracias!
  #7 (permalink)  
Antiguo 26/05/2007, 04:33
 
Fecha de Ingreso: abril-2007
Mensajes: 232
Antigüedad: 10 años, 7 meses
Puntos: 2
Re: Problema headers en Mozilla

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.
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 13:28.