Firefox no lee heigth, cual es el error?

[cpucpu]

estoy haciendo una pagina en css, el problema esta en un div de navegacion que se encuentra en float left, el caso es que iexplorer se vizualiza correctamente, pero firefox no respeta un "height: 25px" intente el "!important", pero nada.
Por tanto se ve desalineado en un navegador...

halle una especie de solucion...usar un "display:block" para que de esta manera todo el texto (en ambos navegadores) quede a la misma altura, y luego le puse un "padding-bottom:-19px"...... aunque se que no es lo correcto, por eso me gustaria saber cual es el error de mi codigo css:(este es el codigo donde no aplico el truco,es decir el error nato.)

/*Build*/
#navigation {float: left;width: 10em;height: 20em}
#content {margin: 0 0 0 10em;width: auto; background: url('../Elegant/images/banner.jpg') no-repeat top; height:600px;}
#footer {clear: left}

/*Links*/
#navigation a:link, #navigation a:active, #navigation a:visited{
background: url('../Elegant/images/button-el.jpg') no-repeat;
padding-left: 30px;
padding-top: 5px;
font-family: tahoma;
font-weight: bold;
font-size: 12px;
color: #666666;
height: 25px !important;
width: 160px ;
text-decoration: none;
}

#navigation a:hover {
background-position: 0px -25px;
text-decoration: none;
color: #000000;
}

#navigation p{
font-family: arial narrow;
font-size: 14px;
color:666666}


esta es la direccion para que vean como firefox no respeta el height:
http://www.geocities.com/thewebm/Elegant-css.htm

Gracias

[KnowDemon]

Hola:

Creo que los problemas van por aquí:

A #navigation le falta el punto y coma en la regla height.

A #footer le falta el punto y coma en la regla clear.

A #navigation p le falta el punto y coma en la regla color.

Te recomendaría que usaras "comillas" para definir los nombres de fuente que sean de más de una palabra ("Arial Narrow").

[cpucpu]

...no lo creo, no funciona, algua otra idea del porque no respeta el height??

...tal ves me equivoque en otro atributo,pero no se cual es.
Alguien pude ayudarme.

[KnowDemon]

Hola,

Ya comprendo. Había entendido mal el problema... Ahí te va:

Estas intentando asignar una altura a un elemento en línea (los "anchors" a), pero dicha regla no aplica a ellos. Debes aplicarlo a un elemento en bloque, o bien, forzar a los elementos a comportarse como tales, usando display: block;

[cpucpu]

oye, si lo arregle, pero siguo sin entender el significado de lo que hise, q creo es lo mas inportante... use display block,por que lei q pondria un <p>antes y despues del elemento y por tanto quedaria a la misma altura"alineado", luego le hise un margin-bottom de -28px(puesto que display block insertaria un <p> entes y despues, y entonces quedaria muy espaciado)

en otro ausnto...por que el "heigth" no se le puede asignar a los <a>?,creo que el width si sirve.



por cierto...

Debes aplicarlo a un elemento en bloque, o bien, forzar a los elementos a comportarse como tales, usando display: block;

esto parecen q son dos respuestas, pero creo q es la misma, estoy en lo correcto?

gracias

[KnowDemon]

Iniciado por cpucpu

esto parecen q son dos respuestas, pero creo q es la misma, estoy en lo correcto?

gracias

Si, es una sola respuesta. Trataré de aclararte eso de los bloques:

Hay dos clases de elementos: de tipo bloque y tipo línea. Los elementos de bloque se comportan como si fueran cajas. Por ejemplo, un p o un div. Los elementos en línea se comportan como texto, por ejemplo, img, a, span, etc. Cada palabra de un texto se considera elemento en línea, y como todos, siguen el "flujo del texto".

Hay reglas que se pueden aplicar a unos u otros, según el caso. También existen reglas sobre que tipo de elementos pueden contener a otros. Por ejemplo, un a no puede contener elementos en bloque, por lo que algo asi:

<a href="http://yahoo.com"><h1>Ir a Yhaoo!</h1></a>

...es incorrecto, dado que las cabeceras son elementos en bloque.

Te recomiendo que veas el siguiente tutorial. Encontraras una referencia al tipo de elementos que es, y puede o debe contener cada uno:
http://html.conclase.net/

Podrías hacer tu menu con una lista. Los elementos de lista li son elementos de bloque y puedes asignarles tamaños de forma natural. Dentro colocarías los a. (OJO: IE y los otros "crean" la sangría de la lista utilizando propiedades diferentes (unos usan el padding, otros margin, unos lo aplican a la lista y otros a los elementos de lista) Es cosa que redefinas las propiedades adecuadas para tener una apariencia similar en todos).

[cpucpu]

gracias, por todo.