Problème CSS très étrange sur Internet Explorer. Je n'ai aucune idée de ce qui ne va pas!

Question

Je viens de tester un site web que j'ai installé dans Internet Explorer. Fonctionne bien dans Firefox bien sûr. J'ai un ensemble de feuilles de style dont la plupart ont une image de fond, l'utilisateur peut sélectionner les différentes feuilles de style à leur guise. Les feuilles de style sont exactement les mêmes en dehors des couleurs et des arrière-plans, bien sûr la version basée sur le texte est différente. Quoi qu'il en soit, j'ai aussi un changeur de taille de police pour que les utilisateurs puissent choisir la taille de police qui leur convient le mieux. J'ai 4 paramètres qui vont de petit, standard, grand et Xlarge quand je charge la grande et la grande taille de la police l'image bg atteint la fin de mon div ce qui est bien. Toutefois, lorsque j'utilise les tailles de police petites et standard, l'image bg couvre seulement environ 5% de ce qu'il devrait. Peut-être que les images ci-dessous vous aideront à comprendre mon problème.

Vive CHL

Ps le css fontsize ne contient que les tailles de police pour les classes et ids pas de style d'arrière-plan.

Problème: http://www.webquark.co.uk/project/problem.bmp

travail sur la taille de police plus grande: http://www.webquark.co.uk/project/working.bmp

Ce qu'il ressemble dans le travail firefox: http://www.webquark.co.uk/project/firefox.bmp

Heres mon css qui définit le 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

Salut J'ai trouvé le problème dont j'avais besoin pour régler la hauteur de la div. Pour ceux qui ont mentionné cela, j'ai ajouté un point à votre représentant et merci pour les conseils: D

CHL

CSS:

height:100%; 

Answer 2

"Problème CSS sur Internet Explorer. Je ne sais pas ce qui est faux! »

Ceci est entendu à peu près tous les jours à mon bureau.

Ma seule suggestion est d'essayer de régler la hauteur de l'élément de fond.

Answer 3

En parlant de CSS .. problèmes, les trop-pleins de contenu sous la zone taguée dans votre post

Answer 4

Effacez vos flotteurs après la div blanc recouvrant le fond (qui a tous les mots il) le plus simple est d'ajouter:

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

Juste après l'étiquette de fin de la div blanche. Si cela ne fonctionne pas, essayez de l'ajouter à la ligne avant la balise de fin de la div blanche. Le CSS pour l'intercalaire:

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

Answer 5

Pouvez-vous publier le code HTML généré?

Je suppose que IE ne voit aucun contenu dans votre conteneur avec la classe "content". Cela peut être dû au fait que le contenu interne n'a pas "hasLayout" (une chose magique IE)

comme suggéré, essayez de régler la hauteur à "1%" qui devrait déclencher hasLayout, ou réglez le "zoom: 1;" qui fait aussi l'affaire.

Answer 6

Dans votre déclaration CSS, vous utilisez le nom de la police "Ariel". Celui-ci n'existe probablement pas. Arial, c'est. Ariel est une sorte de détergent.

En fait, la déclaration droite de la séquence non-serif serait:

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

Answer 7

vous pouvez aller de l'avant et d'utiliser le code CSS sténographie pour le fond comme ceci:

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

En outre, IE6 ne supporte pas background-attachment: fixé autre que sur le corps.

Answer 8

Il est difficile d'en être sûr sans voir le reste de votre code ou du site en ligne, mais cela ressemble à un problème de type conteneur-flottant classique. La façon la plus simple de traiter cela est d'ajouter overflow: auto à la boîte qui contient vos flottants (je suppose que c'est .content, ici). Cela devrait étirer le papier peint à sa bonne hauteur.

A défaut, essayez d'ajouter l'espaceur "clearfix" que Logan suggested à la fin de votre div .content.