Una cabecera rebelde!! (solucionado)

Muy buenas,

He detectado un problema en mi web, que no estoy consiguiendo arreglar.
Como algunos sabéis, la web está hecha con DIVs y CSS. Creo que el problema está en uno de los DIVs, pero como no estoy seguro de si es sólo el DIV o el problema está en el CSS, pues pogo el post en el foro general.

Os cuento,

La cabecera de mi web se ve con diferente alto en Firefox y en IE, lo que hace que en IE7 los submenús aparezcan por encima del menú principal ¡Y eso me está volviendo loco!!!!

Os pongo aquí el código del html desde body hasta el comienzo del menú:
<body>
    <div id="general">
        <div id="superior">
            <div id="cabecera">
                 
                


                [img]http://www.elcampamentobase.es/objetos/logo.png[/img]

                <h3>Revista de Informacion</h3>

                <div id="linea">
                    <h4>la fecha del día (es también un script)</h4>
                </div>
        </div>
    </div>
...

Y ahora el CSS con todo lo que se refiere a los DIVs que hasta aquí han aparecido:

/* Propiedades del BODY */

BODY { 
	text-align: center ; 
	margin: 0px;
	font-family: Verdana, Helvetica, Arial, sans-serif;
	font-size: small;
}


/* Definición de Capas */

#general {
	WIDTH: 100% ;
	margin: 0 auto 0 auto;
	padding: 0px;
}

#superior {
	width: 100%;
	margin: auto;
	background-color: #bbe573 ;
}
#cabecera {
	width: 728px ;
	margin: 0 auto 0 auto;
	padding: 0.4em;
}

#linea {
	width: 90%;
	text-align: right;
}

Muchas gracias a todos!!
Hola hq, no desabilitaste el HTML y no lee bien tu código.
Yo ya lo habia visto así, porque uso el IE, y ahora que lo miro con el Firexfox, pues como que está muy bonito. Siento no poder ayudarte porque de divs no se casi nada. Igualmente cuando los he usado, y como soy un poco torpe con ellos, los meto en una tabla con una sola celda y una sola columna, así no se me mueven demasiado. Y tocando un poco en el css y otro en el código html consigo que se estén quietos en un area limitada.

Por cierto te está quedando muy chula la web, un comentario: porque no pintas el fondo de la imagen donde tienes el menú, del mismo verde que la zona del banner? te quedaría muy bien.
Un saludo
Uppsss!! :oops: :oops:
Se me pasó por completo!!!
Bueno, ya lo he solucionado, gracias volvoreta. En cuanto a lo de pintar el fondo del menú lo tendré en cuenta, porque ya me lo habéis dicho más de uno, jejeje, pero después de arreglar las cosillas que faltan!!
Gracias!!
He llegado tarde por lo que veo, je , je ,je.

Otra cosa que se ve diferente es el tamaño del texto. En firefox se ve más pequeño mientras que en explorer se ve más grande.

No es ningún inconveniente pero si lo quieres cambiar, puedes darle un tamaño específico en las etiquetas <h3> y <h4> que creo que son las que estás usando.

h3 {font-family:loque sea ; font-size: 18px; etc, etc. }

Sigue viéndose un pelín más alto en iexplorer, pero eso lo podrías solucionar poniéndole un alto a Superior (height:100px)

Un saludo compañero.
Mirando tu web, veo que lo de los títulos ya lo has solucionado :D .
Pues sí que te está quedando muy bien, enhorabuena.

Veo también que estás usando porcentajes, yo no te lo aconsejo. Un ejemplo lo tienes en FECHA. En firefox queda más a la derecha mientras que en iexplorer te lo deja más al centro y eso que le has puesto un ALIGN=RIGHT.
Esto viene según la resolución, ya que los porcentajes del div cambian, moviéndolo o más hacia el centro o más hacia la derecha.

Has probado a ver tu web en resoluciones muy grandes? Quizá quede mucho recuadro y poco texto.

Yo te comento esto por el código que has puesto aquí, el de tu web no lo he mirado.

Un Saludo
Muchas gracias solidaria (y también por mover el tema, que estaba en un mar de dudas sobre dónde ponerlo).

Con respecto a los pocentajes, lo he hecho así a propósito para que se adapte lo mejor posible a todas las resoluciones, pensando por defecto en una de 800px de ancho (aunque la verdad, no me he preocupado demasiado del alto, lo mismo le tengo que dar otra vuelta de tuerca). Mi intención es hacer la mayor parte posible con porcentajes, tanto en anchos de objetos como en tamaño de fuentes, que los que tienen resoluciones mayores también tienen derecho a poder leer el texto :roll: (creo).

Yo trabajo fundamentalmente con 2 resoluciones que hoy por hoy creo que son las más frecuentes o al menos eso dicen las estadísticas de los que visitan mi web (1152x864 en el trabajo y 1024x768 en casa) y en ambos casos no tengo problemas para visualizar la web.

Lo cierto es que ahora mismo lo que más me preocupa es la gran diferencia entre los altos en IE y en FireFox, parece que en el primero me baja la línea de la fecha por debajo del logo, a lo mejor si le pongo una posición absoluta.... A ver si lo puedo probar esta noche o mañana!!
Igual igual nunca te va a quedar, siempre se van a haber diferencias entre los navegadores, lo importante es que el resultado sea lo más parecido posible.

Si tu web se ve bien en esas resoluciones con porcentajes, de fábula :wink:

Un saludo.
Al final era muy fácil, pero me costó darme cuenta.

Primero intente poner una posición absoluta al div "linea" y, aunque se me ajustaba más o menos bien, el total seguía siendo diferente.

Eso me llevó a pensar que a lo mejor poniendo al div la propiedad float: right se me arreglaría, pero no fue así, de hecho, comenzó a aparecer una zona blanca feisima en Firefox.

Total, que me di cuenta de que existe una propiedad que apenas utilizo: height, así es que especifiqué un alto al div "superior" y el resto lo dejé como estaba, el resultado lo podéis ver en la web.

¡POR FIN! ¡Se ve el mismo alto de cabecera en IE y en Firefox!

Para saber el por qué, o la explicación de la solución:

Firefox usa el alto que necesita el DIV y si hay algún elemento que dentro de ese div, no lo alarga, al contrario que IE, que alarga el DIV hasta ocupar el alto de todos los elementos que contiene, así es que le puse al DIV un alto menor que el que ocupaba en IE e igual al que ocupa todo lo que aparece en Firefox.