CSS problema muy extraño en Internet Explorer. No tengo idea de lo que está mal! [cerrado]

Question

Me acaban probando un sitio web que he creado en el explorador de Internet. Funciona bien en Firefox, por supuesto. Tengo un conjunto de hojas de estilo en la mayoría de los cuales tienen una imagen de fondo que, el usuario puede seleccionar las diferentes hojas de estilo a su antojo. Las hojas de estilo hacen exactamente lo mismo, aparte de colores y fondos, por supuesto, la versión basada en texto hace de manera diferente. De todos modos también tengo un cambiador de tamaño de la fuente por lo que los usuarios pueden elegir el tamaño de la fuente mejor para ellos. Tengo 4 configuraciones que van desde pequeño, estándar, grande y Xlarge cuando cargo la gran y tamaños de fuente del XLarge la imagen bg llega al final de mi div que está muy bien. Sin embargo cuando se utiliza la pequeña y tamaños de fuente estándar de la imagen bg sólo cubre aproximadamente el 5% de lo que debería. Tal vez las imágenes a continuación le ayudarán a entender mi problema.

Saludos CHL

PD: el tamaño de fuente css sólo contiene los tamaños de fuente para las clases y las identificaciones no de fondo estilo.

Problema: http://www.webquark.co.uk/project/problem.bmp

Trabajar en el tamaño de letra más grande: http://www.webquark.co.uk/project/working.bmp

Lo que se ve en Firefox de trabajo: http://www.webquark.co.uk/project/firefox.bmp

Aquí está mi css que establece el BG:

.content{
background-image: url(springBG.jpg);/**Change for season**/
background-attachment:fixed;
background-position:top center;
background-repeat:no-repeat; 
font-family: Calibri, Ariel, sans-serif;
}

Answer 1

Hola He encontrado el problema que tenía que ajustar la altura de la div. Para los que mencioné esto he añadido un punto a su representante y gracias por el consejo: D

CHL

CSS:

  height:100%;

Answer 2

En su declaración CSS se utiliza el "Ariel" nombre de la fuente. Éste probablemente no existe. Arial, es decir. Ariel es una especie de detergente.

En realidad, la declaración secuencia no-serif correcta sería:

font-family: Calibri, Tahoma, Arial, Helvetica, Sans-Serif;

Answer 3

"problema de CSS en Internet Explorer. No tengo idea de lo que está mal!"

Este es escuchado casi todos los días en mi oficina.

Mi única sugerencia es tratar de ajustar la altura del elemento de fondo.

Answer 4

Hablando de problemas de CSS, los desbordamientos de contenido en la caja etiquetada en su puesto.

Answer 5

Trate de limpiar sus flotadores después de la div blanco solapando el fondo (que tiene todas las palabras en el mismo). La forma más sencilla es añadir:

<div class="spacer"></div>

Justo después de la etiqueta final del div blanco. Si esto no funciona, tratando de añadir a la línea antes de la etiqueta final del div blanco. El CSS para espaciador:

.spacer
{
    clear: both;
    height: 0;
    line-height: 0;
    font-size: 0;
}

Answer 6

Se puede publicar el código HTML generado?

supongo que IE no ve ningún contenido en su envase con el "contenido" de clase. Esto podría ser debido a que el contenido interno no tiene "hasLayout" (una cosa mágica IE)

como se sugiere TM, pruebe a ajustarla a la altura "1%", que deben dar lugar a hasLayout, o establecer el "zoom: 1;" que también hace el truco.

Answer 7

puede seguir adelante y utilizar el CSS en forma abreviada para el fondo de este modo:

background: url(yourimage.jpg) no-repeat top center;

Además, IE6 no soporta background-attachment: fijo que no sea en el cuerpo

.

Answer 8

Es difícil estar seguro sin ver el resto de su código o el sitio en vivo, pero esto se ve como un problema clásico que contiene-flotador. La forma más sencilla de hacer frente a esto es agregar overflow: auto a la caja que contiene sus flotadores (supongo que eso es .content, aquí). Eso debería estirar el fondo de pantalla a la altura adecuada.

En su defecto, trate de añadir el "clearfix" espaciador que Logan sugirió hasta el final de su div .content.