28202 sujets

CSS et mise en forme, CSS3

[Résolu]Bug affichage séparé par bandes noires sous IE 6

Bonsoir à tous,

j'ai fait un include de 3 pages htm/css sans bordures.

firefox donne ça (bien) :

01

IE 6 ça (pas bien):

02

des séparations par bandes noires... ça doit venir du code mais tout semble ok pour firefox et moi Smiley smile Existerait-il un bug connu qui expliquerait ce comportement étrange?

Je débute en css, si quelqu'un a une idée de la cause du pb...

Merci d'avance,

Justin
Modifié par Justin (19 Sep 2007 - 09:46)
Bonsoir et bienvenue Smiley cligne

Comme tout le monde n'est pas devin, je te rappelle l'une des Règles que tu as dû survoler trop vite :
Règle 13 a écrit :
Enfin, n'hésitez pas à toujours fournir une url où les membres auront un aperçu de votre problème. La règle est simple : il faut toujours donner un maximum de détails pour être sûr d'avoir une chance que les autres comprennent et aident.

Modifié par Hermann (19 Sep 2007 - 00:37)
Euh et bien, je ne comprends pas ta remarque j'ai mis deux liens vers deux images... 01 et 02... ne sont-ils pas visibles?

Oups, si tu parles des pages htm, elles ne sont malheuseument pas en ligne, je n'ai pas encore d'hébergeur...

Que dois-je faire alors?
Modifié par Justin (19 Sep 2007 - 00:42)
Justin a écrit :
Euh et bien, je ne comprends pas ta remarque j'ai mis deux liens vers deux images... 01 et 02... ne sont-ils pas visibles?


En général il vaut mieux donner le code ou mieux une URL pour avoir un aperçu du problème mais a priori ces espaces pourraient venir d'un problème de fusion des marges Smiley cligne
Merci! Je vais voir ça de plus près.

Mon code ressemble à ça (on ne se moque pas Smiley cligne )

CSS

body {
background-color: #000000;
	}

#header {
margin-top: 10px;
margin-bottom: 0px;
margin-right: auto;
margin-left: auto;
background-color : white;
background-image: url(img/logo_haut.jpg);
background-repeat: no-repeat;
width: 900px;
height: 163px;
padding: 0;
border-left: 3px solid #A0997F;
border-top: 3px solid #A0997F;
border-right: 3px solid #A0997F;
}

#centre {
width: 900px;
height: 450px;
background-color:white;
background-image: url(img/img_centre.jpg);
background-position: 30% 50%;
background-repeat: no-repeat;
margin-top: 0px;
margin-bottom: 0px;
margin-right: auto;
margin-left: auto;
text-align: right;
border-left: 3px solid #A0997F;
border-right: 3px solid #A0997F;
}

#pied {
width: 900px;
height: 20px;
background-image: url(img/ligne_bas.jpg);
background-repeat: no-repeat;
background-color: #FFFFFF;
text-align: center;
padding-top: 8px;
border-left: 3px solid #A0997F;
border-right: 3px solid #A0997F;
border-bottom: 3px solid #A0997F;
margin-bottom: 10px;
margin-right: auto;
margin-left: auto;
}


XHTML

(tête)


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
<title>Tete</title>
<meta http-equiv="Content-Type" content="text/HTML; charset=utf-8" />
<style type="text/css" media="all">@import "style.css";</style>
</head>
<body>
<div id="header">
</div>
</body>
</html>


(corps)


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
  <head>
    	<title>Corps</title>
    	<meta http-equiv="Content-Type" content="text/HTML; charset=utf-8" />
	<style type="text/css" media="all">@import "style.css";</style>
  </head>
<body>
<div id="centre">
  	test <br />
  	partie avec du contenu occupant le reste de la largeur<br />
  	partie avec du contenu occupant le reste de la largeur<br />
  	partie avec du contenu occupant le reste de la largeur<br />
  	partie avec du contenu occupant le reste de la largeur<br />
  	partie avec du contenu occupant le reste de la largeur<br />
  	partie avec du contenu occupant le reste de la largeur<br />
  	partie avec du contenu occupant le reste de la largeur<br />
  	partie avec du contenu occupant le reste de la largeur<br />
  	partie avec du contenu occupant le reste de la largeur<br />
  	partie avec du contenu occupant le reste de la largeur<br />
  	partie avec du contenu occupant le reste de la largeur<br />
  	partie avec du contenu occupant le reste de la largeur<br />
	partie centrale qui &quot;pousse&quot; les colones vers le bas.<br />
  	partie avec du contenu occupant le reste de la largeur<br />
  	partie avec du contenu occupant le reste de la largeur<br />
  	partie avec du contenu occupant le reste de la largeur<br />
  	partie avec du contenu occupant le reste de la largeur<br />
  	partie avec du contenu occupant le reste de la largeur<br />
</div>
</body>
</html>


(pied)


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
<title>pied</title>
<meta http-equiv="Content-Type" content="text/HTML; charset=utf-8" />
<style type="text/css" media="all">@import "style.css";</style>
</head>
<body>
<div id="pied">
</div>
</body>
</html>


Index.php


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
  <title>Megatest</title>
</head>
<body>
<?php include('tete.htm'); ?>
<?php include('corps.htm'); ?>
<?php include('pied.htm'); ?>
</body>
</html>

Modifié par Justin (19 Sep 2007 - 01:32)
Voilà, j'ai édité l'autre post. J'espère que quelqu'un pourra me dire si je fais pas trop de bêtises.

Merci!
Ok! Merci !

Je crois que j'ai compris :

Un cas typique : l’insertion d’une page complète au moyen d’un include().

En effet, le résultat fait très peur.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
  <title>Megatest</title>
</head>
&#65279;<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
<title>Premier essai</title>
<meta http-equiv="Content-Type" content="text/HTML; charset=utf-8" />
<style type="text/css" media="all">@import "style.css";</style>
</head>
<body>
<div id="header">
</div>
</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
<title>Premier essai</title>
<meta http-equiv="Content-Type" content="text/HTML; charset=utf-8" />
<style type="text/css" media="all">@import "style.css";</style>
</head>
<body>
&#65279;<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
<title>Premier essai</title>
<meta http-equiv="Content-Type" content="text/HTML; charset=utf-8" />
<style type="text/css" media="all">@import "style.css";</style>
</head>
<body>
<div id="centre">
  	BIENVENUE<br />
  	partie avec du contenu occupant le reste de la largeur<br />
  	partie avec du contenu occupant le reste de la largeur<br />
  	partie avec du contenu occupant le reste de la largeur<br />
  	partie avec du contenu occupant le reste de la largeur<br />
  	partie avec du contenu occupant le reste de la largeur<br />
  	partie avec du contenu occupant le reste de la largeur<br />
  	partie avec du contenu occupant le reste de la largeur<br />
  	partie avec du contenu occupant le reste de la largeur<br />
  	partie avec du contenu occupant le reste de la largeur<br />
  	partie avec du contenu occupant le reste de la largeur<br />
  	partie avec du contenu occupant le reste de la largeur<br />
  	partie avec du contenu occupant le reste de la largeur<br />
	partie centrale qui &quot;pousse&quot; les colones vers le bas.<br />
  	partie avec du contenu occupant le reste de la largeur<br />
  	partie avec du contenu occupant le reste de la largeur<br />
  	partie avec du contenu occupant le reste de la largeur<br />
  	partie avec du contenu occupant le reste de la largeur<br />
  	partie avec du contenu occupant le reste de la largeur<br />
</div>
</body>
</html>

    
</body>
</html>
&#65279;<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
<title>pied</title>
<meta http-equiv="Content-Type" content="text/HTML; charset=utf-8" />
<style type="text/css" media="all">@import "style.css";</style>
</head>
<body>
<div id="pied">
</div>
</body>
</html>
</html>


Merci beaucoup, je m'y remets dès demain!
Modifié par Justin (19 Sep 2007 - 02:05)
Le problème ne venait pas de là, c'est ça le pire Smiley smile

Mais après modification du code, j'ai trouvé facilement l'origine qui est expliquée là: mes fichiers à inclure étaient en utf-8!

Merci encore.
Modifié par Justin (19 Sep 2007 - 09:45)
Modérateur
Salut,

Justin a écrit :
Le problème ne venait pas de là, c'est ça le pire Smiley smile

Comment ça ? Quel est ton code final ? Smiley sweatdrop

Lorsqu'on fait une include dans une page, on ne met pas une page entière comme dans tes exemples ci-dessus. Là, tu te retrouves avec 4 doctypes, entêtes, etc... bref, si ton code ressemble à ça, tu n'as pas compris le principe des includes et il te faut revoir d'urgence le lien que t'a donné Hermann. Smiley confus
Non ce que je voulais dire, c'est qu'après avoir compris le tuto et corrigé le code, le problème n'était toujours pas résolu! Mais j'ai finalement trouvé la vraie cause (l'encodage pas UTF-8) et corrigé mon code au passage. Merci donc!
Sujet clos
Aller à