18041 sujets

Questions générales et questions de débutants

[RESOLU] Pb de mise en page sous IE 6.0

Hello,

J'ai un petit problème avec une mise en page que je suis en train de faire : en fait je veux un header (qui contiendra une anim flash dans le futur) et dessous 2 colonnes, une qui contiendra des infos, l'autre des news, ces colonnes devront respecter une marge bien précise afin de correspondre à certains éléments graphiques contenus dans mon header flash.
Le code de ma page est le suivant :

<!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" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>test</title>

<style type="text/css">
body {
	font-family:Arial, Helvetica, sans-serif;
	font-size:1em;
	background-color:white;
	margin :0;
	padding :0;
	text-align : center;
	color : white;
	background-image:url(degrade.jpg);
	background-repeat:repeat-x;
	
}
#anim {
	width : 1000px;
	height : 370px;
	margin : 0;
	padding : 0;
	background-color :red;
}
#principal {
	margin : 0 auto 0 auto;
	padding : 0;
	width :1000px;
	text-align:center;
}
h3 {
	text-align : center;
}
#contenu {
	margin : 0;
	padding : 0;
}
#infos {
	float : left;
	width : 746px;
	margin : 0 0 0 20px;
	height : 300px;
	background-color:#333;
	background-image:url(arrondi1.png);
	background-position:bottom left;
	background-repeat:no-repeat;
}
#news {
	float : left;
	width : 210px;
	margin : 0 0 0 14px;
	height :200px;
	background-color:#333;
	background-image:url(arrondi2.png);
	background-position:bottom left;
	background-repeat:no-repeat;
}
#pied {
	clear : both;
	width : 1000px;
	height : 50px;
	background-color:#ddd;
	border-style : double;
	border-width :1px;
	border-color : #ccc;
}
</style>
</head>
<body>
<div id="principal">
  <h1 id="anim">

  </h1>
  <div id="contenu">
    <div id="infos">
      <h3>INFORMATIONS</h3>
    </div>
    <div id="news">
      <h3>NEWS</h3>
    </div>
    <div id="pied"></div>
  </div>
</div>
</body>
</html>


Tout marche comme je veux sous Firefox, Opera et Internet Explorer 7.0 mais pas sous IE 6.0 où la colonne news se trouve sous la colonne "infos". Ceci est dû ,je pense,à un décalage vers la droite de la colonnes "infos". Je ne sais pas pourquoi il y a ce décalage pour mon calque "infos", la marge à gauche ets pourtant bien à 0 et si je rajoute un padding:0 ça ne change rien non plus.
Quelqu'un peut-il m'aider? Merci
le décalage constaté est de 10px pour IE 6.

En fait, j'ai trouvé une solution en utilisant un hack CSS spécifique à IE 6
J'ai mis les styles dans un fichier css à part, et ai fait un fichier alternatif spécifiquement à IE6 que je charge dans un commentaire conditionnel
<!--[if IE 6]><![endif]-->


Il y sûrement autre chose à faire mais en tous ça résout mon pb dans l'immédiat.
Modifié par Pascal68bis (21 Aug 2007 - 02:54)
a écrit :
En fait, j'ai trouvé une solution en utilisant un hack CSS spécifique à IE 6


Il ne s'agit aucunement d'un Hack mais de commentaires conditionnels qui sont (on ne le répétera jamais assez) la meilleure (l'ultime) solution pour corriger les manquements de IE.

a écrit :
Il y a sûrement autre chose à faire mais en tous cas ça résout mon pb dans l'immédiat.


Non du tout Smiley cligne .
Sujet clos
Aller à