Sujet Précédent Sujet Suivant

Incompatibilité CSS IE 6

Résolu/Fermé
AbOo Messages postés 319 Date d'inscription samedi 11 juin 2005 Statut Membre Dernière intervention 16 janvier 2009 - 15 janv. 2009 à 23:21
AbOo Messages postés 319 Date d'inscription samedi 11 juin 2005 Statut Membre Dernière intervention 16 janvier 2009 - 16 janv. 2009 à 18:48
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

Réponse 1 / 6
Sephirius
15 janv. 2009 à 23:33
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 vendredi 19 octobre 2007 Statut Membre Dernière intervention 24 mars 2011 76
16 janv. 2009 à 01:26
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 samedi 11 juin 2005 Statut Membre Dernière intervention 16 janvier 2009 37
16 janv. 2009 à 01:35
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
16 janv. 2009 à 10:46
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 5224 Date d'inscription samedi 20 janvier 2007 Statut Contributeur Dernière intervention 22 mars 2024 1 353
16 janv. 2009 à 11:24
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 samedi 11 juin 2005 Statut Membre Dernière intervention 16 janvier 2009 37
16 janv. 2009 à 18:48
Merci pour tout ça marche !!
0

Discussions similaires

Belote à 6 joueurs
Bererom -
Raymond PENTIER -

10 réponses
Prélèvement Google Ireland Limited
jaffa1961 -
gill34051 -

32 réponses
Erreur d'exécution 13 Incompatibilité de type
grace -
pijaku -

5 réponses
Facture de google 380€ !
Misternet -
okapi -

61 réponses
Freebox bloquée à l'étape 6
Linda -
brupala -

14 réponses