2010-05-07 7 views
1

J'espère ne pas enfreindre les règles en posant une question qui se rapporte à un projet sur lequel je travaille. Si vous affichez ma page here et l'affichez dans Firefox et de nouveau dans Internet Explorer, la largeur des zones de contenu principal diffère. Dans Firefox, tout s'aligne parfaitement avec la publicité en haut de la page, mais dans IE, la largeur des boîtes de contenu semble être inférieure d'environ 20 pixels.Différences CSS entre IE et FF

Ma question est évidente à l'heure actuelle, mais qu'est-ce qui fait que la largeur d'IE est insuffisante et que serait une solution simple?

S'il m'arrive d'enfreindre les règles en posant une question qui n'est pas assez générique pour être utile aux autres, alors permettez-moi de la reformuler; quelle serait la meilleure approche pour résoudre les différences visuelles entre les navigateurs? Dois-je utiliser un fichier CSS séparé pour IE ou existe-t-il un moyen de définir des lignes dans mon fichier CSS qui ne sont restituées que par un navigateur spécifique?

Il serait préférable que quelqu'un puisse me fournir le CSS nécessaire pour aligner les choses correctement, mais je serais plus qu'heureux d'apprendre comment rendre le CSS dynamique (si c'est possible).

Merci à tous. :)

+0

Vous n'êtes pas enfreindre les règles. (Sauf si votre projet a une NDA) – SLaks

+0

Okay, cool. C'est un projet personnel sur lequel je travaille; rien pour l'école ou le travail. –

Répondre

8

Votre HTML n'est pas bien formé. Vous devez <html>, et <titre> devrait être dans < tête >. Plus important encore, vous avez besoin d'un DOCTYPE pour que les navigateurs utilisent le mode standard au lieu du mode quirks lors du rendu. Le mode Quirks est la cause des différentes largeurs.

Le doctype HTML 5 est: <! DOCTYPE html > et devrait être la première ligne de votre fichier HTML. Voici un fichier HTML minimum.

<!DOCTYPE html> 
<html> 
    <head> 
     <title>Document</title> 
    </head> 
    <body> 
    </body> 
</html> 
+0

Wow !!! A ++++! L'ajout du résolvait instantanément le problème. Il a causé quelques autres effets secondaires indésirables, mais ce sera un jeu d'enfant à réparer; au moins maintenant les choses semblent identiques dans les deux navigateurs. –

+0

Encore une fois, merci beaucoup. Vous n'avez aucune idée de combien de temps je travaillais à faire disparaître ces petites différences visuelles. Je n'avais aucune idée qu'un doctype était si puissant. –

+0

@Joe - Si vous utilisez Firefox, vous trouverez probablement le plugin HTMLTidy plutôt utile: http://users.skynet.be/mgueury/mozilla/ – indiv

0

essayer d'utiliser

box { 
    width: 100%; 
}