Problème css avec navigateur FF et EI Fermé

Question

Bonjour, Je n'arrive pas à comprendre pourquoi FireFox tient compte des mesures inscrites dans mon fichier .css et EI semble l'ignorer en affichant mes trois div à savoir : bandeau, navigateur et pied page avec une longueur en moins. Quelqu'un parmi vous pourrait-il m'éclairer s'il vous plaît. Merci par avance de votre aide. Voici mon code html sobre suivi du css :

bandeau

navigateur

menu2

menu3

menu4

contenu

ppage

------------------------------- et voici mon CSS : div#contenaire{ width:100%; height:100%; background-color:white; } div#bandeau{ width:70%; height:5%; background-color:red; margin:5% 15% 0.5% 15%; } div#navigateur{ width:70%; height:5%; background-color:silver; margin:0.5% 15% 0.5% 15%; } div#menu1{ float:left; width:15%; height:80%; background-color:blue; } div#menu2{ float:right; width:15%; height:80%; background-color:blue; } div#menu3{ float:left; width:10%; height:80%; background-color:yellow; } div#menu4{ float:right; width:10%; height:80%; background-color:yellow; } div#contenu{ width:90%; height:80%; background-color:lime; } div#ppage{ width:70%; height:5%; background-color:navy; margin:0.5% 15% 0.5% 15%; }

Groarh · Answer

Salut,
pour commencer, avec quelle version d’IE fais-tu tes tests ? S’il s’agit d’IE5, le problème est connu, regarde :
https://www.google.fr/search?q=modele+boite+ie&gws_rd=ssl

En réalité, IE n’interprète pas les marges comme tout le monde, c’est pourquoi tes 3 éléments ayant des marges vont avoir des dimensions erronées.

Pour y remédier, il faut utiliser un hack css. Je te laisse chercher sur Google (eh ouais, faut trimer un peu ^^).
Il y a de nombreux hacks css, car IE a de nombreux bugs (CQFD, lol). Tous ne concernent pas le problème du « box model » ; et puis, si tu maîtrises l'anglais ça sera sans doute plus facile.

Bon courage !
;)

Groarh · Answer

Ah ! J’ai oublié de te parler des doctype declarations (DTD), j’aurais dû commencer par là … Si tu mets une DTD au début de ton code, tu forces IE à se mettre en mode standard compliant, « respect des standards » en français dans le texte. Je t’avoue que je ne sais pas si, même en mode standard compliant, IE interprète correctement les marges, mais ça ne coûte rien d’essayer ! Et puis, mettre une DTD à toutes ses pages est une bonne habitude à prendre, ça te permet de vérifier la validité de ton code. Il y a plusieurs sortes de DTD en fonction de la manière et de la rigueur dont tu codes ta page. Tu as le choix entre XHTML et HTML tout court, et pour l’un ou l’autre il existe une DTD stricte, une plus laxiste (dite « transitionnelle », et une dédiée aux framesets. Voici un bref topo : XHTML est peu différent de HTML, c’est simplement du HTML modifié pour avoir la syntaxe d’un document XML. En pratique, il s’agit de bien fermer toutes ses balises, même celles qui sont « auto-fermées » comme ou . Mais ne te tracasse pas avec, c’est le cadet de tes soucis … choisis HTML (la version 4.01). Strict est le mode rigoureux : il n’autorise pas à utiliser les balises et attributs des anciennes versions qui ont été déclarés obsolètes. Le validateur te montrera quelles balises sont incorrectes si tu les utilises. Ce mode s’oppose au mode transitionnel. Transitional doit son nom au fait qu’on est censé l’utiliser pour des pages en cours de mise à jour, autrement dit en transition depuis une version plus ancienne de HTML. Les pages ne sont pas censées rester en transition, mais beaucoup de gens s’en contentent … Frameset, je ne penses pas que tu en aies besoin. Je crois qu’elle n’est guère différente de la DTD stricte, mais avec les balises de frames en plus quoi. Voilà, pour résumer je te conseille de choisir HTML 4.01 Strict qui correspond le mieux au bout de code que tu donnes ici. Tu peux trouver le code des DTD dans la liste sur cette page. Rajoute une DTD tout en haut de ton code, vérifie ton code éventuellement, et regarde si ça marche mieux avec IE. Sinon, on essayera autre chose … ;)

Problème css avec navigateur FF et EI

2 réponses

Discussions similaires