28173 sujets

CSS et mise en forme, CSS3

[CSS] tout fonctionne bien tant que ...

Bonjour,

Pouvez vous me dire pourquoi le code ci-dessous fonctionne exactement de la même façon sous IE et Firefox


<html>
<head>
<style type="text/css">
body, html
{
   margin:0;
}
#content
{
   height:100%;
   width: 100%;
   background-color: #F0D080;
}
#haut
{
   width: 100%;
   background-color: #AAAAAA;
}
</style>
</head>
<body>
<div id="content">
	<div id="haut">
		<h1>HAUT</h1>
	</div>
   	<div id="contenu">
      		<h1>CONTENU</h1>      
   	</div>
</div>
</body>
</html>


mais que dès qu'on rajoute l'entête XHTML suivante :

<?xml version="1.0" encoding="ISO-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">


firefox ne produit plus du tout le même résulat que IE (qui pour une fois fonctionne normallement)

C'est à n'y rien comprendre ... Une idée ? Smiley sweatdrop

Merci
Modérateur
bonjour,

Pour IE, le prologue xml ou tout autre texte, balises (script par exemple) placés avant le doctype le fait passer automatiquement en mode "html de base" et du coup il n'applique que les regles css de bases.
Toutes les regles css2 (et plus) ne seront pas appliqué Smiley smile .

Quand aux autres navigateurs, ils reconnaitrons le doctype et le respecteront (avec leurs petites differences).

Si tu enleve le prologue xml, Ie interpreteras ta page de façon differente , comme du xhtml 1.0 et non plus du html Smiley smile .
Ce probleme est assez connu de la part de IE.

++

<edit>IE ne fait donc pas de difference d'interpretation dans tes 2 cas et zap donc le doctype, c'est lui qui se trompe Smiley smile </edit>
Modifié par gcyrillus (26 Mar 2006 - 01:32)
ouais mais du coup ça me dit pas comment il faut que je fasse pour obtenir le même résultat sous IE et sous Firefox.
Si tu fais un copier-coller du code que j'ai donné dans une page HTML, le résultat que je veux obtenir est celui que IE produit. Et ça je vois quand même pas comment faire... Smiley decu
merci je l'avais déjà vu.
J'ai néanmoins trouvé une solution à mon problème.
En définissant tous les conteneurs de niveau supérieur avec une hauteur de 100% et en appliquant la règle min-height:100% pour firefox (grâce à un hack), j'ai réussi à le faire fonctionner correctement.
Merci Smiley cligne Smiley lol
Sujet clos
Aller à