Incompatibilité CSS IE 6 [Résolu/Fermé]

Signaler
Messages postés
322
Date d'inscription
samedi 11 juin 2005
Statut
Membre
Dernière intervention
16 janvier 2009
-
AbOo
Messages postés
322
Date d'inscription
samedi 11 juin 2005
Statut
Membre
Dernière intervention
16 janvier 2009
-
Bonjour,
J'ai dernièrement télécharger un kit graphique, sans l'avoir modifié j'ai voulu vérifier ça compatibilité ie6. Et la .. le header ce décale à gauche de mon écran, je pense que le problème vient du CSS.
Je vous colle le css de la page :

body {
	background-color: #ffffff;
	color: #666666;
	font-family: Arial;
	font-size: 10px;
	margin: 0px;
}


a:link, a:visited, a:active{
color: #989898;
font-size: 10px;
text-decoration: none;
padding-bottom: 1px;
}
a:hover {
border-bottom: 1px dotted #989898;
}

.couleurnoir {
color: #404040;
}

#header {
margin: 0px;
width: 822px;
height: 299px;
background: url('images/header.png') no-repeat;
}
#header-menu {
	float: left;
	padding-top: 15px;
	margin-left: 100px;
	font-size: 12px;
	color: #404040;
}
#header-date {
float: right;
padding-top: 20px;
margin-right: 50px;
}
#header-menu a {
font-size: 12px;
color: #989898;
}
#header-menu a:hover {
color: #404040;
border-bottom: none;
}
#header-copyright {
float: left;
padding-top: 20px;
margin-left: 783px;
width: 10px;
height: 150px;
cursor: pointer;
}

#corps-fond {
margin: auto;
width: 822px;
background: url('images/corps-fond.png') repeat-y center;
}
#corps-fond-forme {
margin-left: -200px;
background: url('images/forme-bas-gauche.png') no-repeat left bottom;
}
#corps-haut {
background: url('images/corps-haut.png') no-repeat center top;
}
#corps-fond-table {
margin-left: 200px;
}
#corps-td-gauche {
padding-left: 68px;
width: 176px;
}
#corps-td-droite {
padding-left: 25px;
width: 504px;
}
#corps-td-droite-nompage {
text-align: center;
padding-top: 48px;
font-size: 16px;
padding-bottom: 25px;
}

#footer {
margin: auto;
width: 820px;
height: 33px;
background: url('images/footer.png') no-repeat;
}
#footer-sous {
text-align: center;
padding-bottom: 8px;
}
#footer-top {
display: block;
float: right;
margin-right: 35px;
margin-top: 12px;
height: 13px;
width: 33px;
border-bottom: none;
}


Est ce que quelqu'un aurais la solution au problème ? Deux jours que je lis plusieurs tutoriel sur les compatibilité 1.6 mais à chaque fois ça déconne.
En espérant trouver une solution ensemble,
Cordialement,

6 réponses

Il est assez dur pr moi de t'aider sans avoir une idée précise de la situation.

Ton #header doit être centré? si c'est si simple, "text-align: center;"
Mais je ne pense pas que tu demandes de l'aide pour si peu...

Je n'arrive pas à visualiser l'ensemble... as tu déjà mis en ligne le skin pour le voir... ou a défaut avoir une copie de la page de corps? (index.htm)

Pour tester tu utilises IE tester ou la IE6?


Dsl je ne sais pas si j'ai affaire à un habitué ou à un débutant...
Messages postés
324
Date d'inscription
vendredi 19 octobre 2007
Statut
Membre
Dernière intervention
21 juillet 2011
64
Ouaip, difficile de savoir ce qui se décale comme ça...

Sinon, pour centrer le header, c'est plutôt :

#header {
margin: 0 auto;
width: 822px;
height: 299px;
background: url('images/header.png') no-repeat;
}
Messages postés
322
Date d'inscription
samedi 11 juin 2005
Statut
Membre
Dernière intervention
16 janvier 2009
37
Désolé, veuillez m'excuser je suis un peu flou en effet :s,
Alors pour plus de précision voici le kit graphique en ligne http://www.meremaki.fr/secret/index.html
J'utilise IE6 directement, qui se trouve sur autre ordinateur chez moi.
Je pense que tu peux me considérer comme un débutant surtout en CSS !
Merci d'avance pour votre aide,
Cdt,
Aboo
PS: Vous verrez que les images sont en PNG, j'ai essayé en les modifiants en jpg (car je sais que ie6 et les png ça fait deux !) mais ça ne change rien !
salut,

essaie sa: (copie colle et enregistre en html)

<!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" xml:lang="fr">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	<meta http-equiv="content-style-type" content="text/css" />
	<title>WhiteClass by CsTh&eacute;orie.Agency</title>
    <style type="text/css">
<!--
.Style1 {color: #FF0000}
.Style2 {font-size: 16px}
.Style3 {color: #006600}
.Style4 {color: #000000}
-->

body {
	background-color: #ffffff;
	color: #666666;
	font-family: Arial;
	font-size: 10px;
	margin: 0px;
}


a:link, a:visited, a:active{
color: #989898;
font-size: 10px;
text-decoration: none;
padding-bottom: 1px;
}
a:hover {
border-bottom: 1px dotted #989898;
}

.couleurnoir {
color: #404040;
}

#header {
margin: 0px;
margin-left:auto;
margin-right:auto;
width: 829px;
height: 299px;
background-color:#000;
overflow:hidden;
}
#header-menu {
	float: left;
	padding-top: 15px;
	margin-left: 100px;
	font-size: 12px;
	color: #404040;
}
#header-date {
float: right;
padding-top: 20px;
margin-right: 50px;
}
#header-menu a {
font-size: 12px;
color: #989898;
}
#header-menu a:hover {
color: #404040;
border-bottom: none;
}
#header-copyright {
float: left;
padding-top: 20px;
margin-left: 783px;
width: 10px;
height: 150px;
cursor: pointer;
}

#corps-fond {
margin: auto;
width: 822px;
background: url('images/corps-fond.png') repeat-y center;
}
#corps-fond-forme {
margin-left: -200px;
background: url('images/forme-bas-gauche.png') no-repeat left bottom;
}
#corps-haut {
background: url('images/corps-haut.png') no-repeat center top;
}
#corps-fond-table {
margin-left: 200px;
}
#corps-td-gauche {
padding-left: 68px;
width: 176px;
}
#corps-td-droite {
padding-left: 25px;
width: 504px;
}
#corps-td-droite-nompage {
text-align: center;
padding-top: 48px;
font-size: 16px;
padding-bottom: 25px;
}

#footer {
margin: auto;
width: 820px;
height: 33px;
background: url('images/footer.png') no-repeat;
}
#footer-sous {
text-align: center;
padding-bottom: 8px;
}
#footer-top {
display: block;
float: right;
margin-right: 35px;
margin-top: 12px;
height: 13px;
width: 33px;
border-bottom: none;
}

    </style>

</head>

<body>

<div id="header">

	<div id="header-menu"><a href="#">Accueil</a> | <a href="#">Clients</a> | <a href="#">Portfolio</a> | <a href="#" class="Style1">Forum</a> | <a href="#">Contact</a></div>
  <div id="header-date">
<script type="text/javascript">dateheure();</script>
	</div>
	<div id="header-copyright" onclick="window.open('http://archann.deviantart.com/'); return false;"></div>

</div>

<div id="corps-fond">
	<div id="corps-haut">
	<div id="corps-fond-forme">

		<table cellpadding="0" cellspacing="0" id="corps-fond-table"><tr style="vertical-align: top;">
		  <td id="corps-td-gauche">

<p><br/>
    </p>
<p align="center"><span class="Style2">Menu</span><br/>
</p>
<p><br/>
</p>
<ul class="Style4">
  <li> <a href="#">Nos r&eacute;f&eacute;rences 2007</a></li>
  <li><a href="#">Nos r&eacute;f&eacute;rences 2007</a></li>
  <li><a href="#">Nos r&eacute;f&eacute;rences 2007</a></li>
  <li><a href="#">Nos r&eacute;f&eacute;rences 2007</a></li>
  <li><a href="#">Nos r&eacute;f&eacute;rences 2007</a></li>
  <li><a href="#">Nos r&eacute;f&eacute;rences 2007</a></li>
  <li><a href="#">Nos r&eacute;f&eacute;rences 2007</a></li>
  <li><a href="#">Nos r&eacute;f&eacute;rences 2007</a></li>
  <li><a href="#">Nos r&eacute;f&eacute;rences 2007</a></li>
  <li><a href="#">Nos r&eacute;f&eacute;rences 2007</a></li>
  <li><a href="#">Nos r&eacute;f&eacute;rences 2007</a></li>
</ul>
<p>&nbsp;</p></td>
	  <td id="corps-td-droite">
			
				<div id="corps-td-droite-nompage">Nos Références 200<span class="Style3">7</span></div>
			
			
                <p><br/>
                  <br/>
          deminutum. Magna haec quidem, sed non principalia, idest quae summae admirationis privilegium sibi iure vendicent. Cur enim non ipsos angelos et beatissimos caeli choros magis admiremur? Tandem intellexisse mihi sum visus, cur felicissimum proindeque dignum omni admiratione animal sit homo, et quae sit demum illa conditio quam in universi </p>
          <p>deminutum. Magna haec quidem, sed non principalia, idest quae summae admirationis privilegium sibi iure vendicent. Cur enim non ipsos angelos et beatissimos caeli choros magis admiremur? Tandem intellexisse mihi sum visus, cur felicissimum proindeque dignum omni admiratione animal sit homo, et quae sit demum illa conditio quam in universi </p>
          <p>deminutum. Magna haec quidem, sed non principalia, idest quae summae admirationis privilegium sibi iure vendicent. Cur enim non ipsos angelos et beatissimos caeli choros magis admiremur? Tandem intellexisse mihi sum visus, cur felicissimum proindeque dignum omni admiratione animal sit homo, et quae sit demum illa conditio quam in universi </p>
          <p>deminutum. Magna haec quidem, sed non principalia, idest quae summae admirationis privilegium sibi iure vendicent. Cur enim non ipsos angelos et beatissimos caeli choros magis admiremur? Tandem intellexisse mihi sum visus, cur felicissimum proindeque dignum omni admiratione animal sit homo, et quae sit demum illa conditio quam in universi </p>
          <p>&nbsp;</p>
          <p>&nbsp;</p>
          <p>&nbsp;</p>
          <p>&nbsp;</p>
          <p>&nbsp;</p></td>
	  </tr></table>

	</div>
	</div>
</div>

<div id="footer">
	<a id="footer-top" href="#header"></a>
</div>
<div id="footer-sous">&copy; Votre Site - design by <a href="http://www.cstheorie.com" target="_blank">CsTh&eacute;orie.Agency</a> for <a href="http://www.kitgraphique.net" target="_blank">KG</a></div>


</body>

</html>
Messages postés
5251
Date d'inscription
samedi 20 janvier 2007
Statut
Contributeur
Dernière intervention
2 avril 2019
1 315
SALUT

Moi j aurais juste change le css header comme ca !

#header {
	width: 822px;
	height: 299px;
	background: url('images/header.png') no-repeat;
	margin-left: -411px;
	left: 50%;
	position: relative;
}


c est vrais que ca fixe le header en cas de redimensiona une petite taille ! :-))
Messages postés
322
Date d'inscription
samedi 11 juin 2005
Statut
Membre
Dernière intervention
16 janvier 2009
37
Merci pour tout ça marche !!