Incompatibilité CSS IE 6

Résolu
AbOo Messages postés 319 Date d'inscription   Statut Membre Dernière intervention   -  
AbOo Messages postés 319 Date d'inscription   Statut Membre Dernière intervention   -
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,
A voir également:

6 réponses

Réponse 1 / 6
Sephirius
 
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...
0
Réponse 2 / 6
TEMCA Messages postés 319 Date d'inscription   Statut Membre Dernière intervention   76
 
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;
}
0
Réponse 3 / 6
AbOo Messages postés 319 Date d'inscription   Statut Membre Dernière intervention   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 !
0
Réponse 4 / 6
pazz
 
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>
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 6
RAD ZONE Messages postés 5230 Date d'inscription   Statut Contributeur Dernière intervention   1 360
 
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 ! :-))
0
Réponse 6 / 6
AbOo Messages postés 319 Date d'inscription   Statut Membre Dernière intervention   37
 
Merci pour tout ça marche !!
0

Discussions similaires

Voxbone ? qui est-ce ?
fanfan54 -
ntrece13 -

159 réponses
Belote à 6 joueurs
Bererom -
Raymond PENTIER -

10 réponses
Règle du jeu
Anonyme -
georges97 -

1 réponse
Erreur d'exécution 13 Incompatibilité de type
grace -
pijaku -

5 réponses
Paris multiple : explications de 2/3, 3/4, 2/4, 2/5, etc.
florent.c -
Aide -

85 réponses