Affichage different sous IE6 et sous IE 7

Question

helazo

30 Jul 2007 à 16:46

Bonjour,

Je suis en train de finir et malgré toute la doc je n'arrive pas à trouver d'ou vient le pb. j'ai mis une condition puis que le site ne s'affiche pas pareil sous FF, IE6 et IE7.

la voici

<!--[if IE 6]><link rel="stylesheet" type="text/css" href="ie6.css" /><![endif]-->
<!--[if IE 7><link rel="stylesheet" type="text/css" href="ie7.css" /><![endif]-->

Pour FF pas de pb, il s'affiche comme je veux

Pour IE 6, je n'arrive pas à afficher la div appelée Abus. Sous IE7, je souhaite rendre le menu plus lisible en mettant la puce plus à gauche.
Voici le Css pour IE 6



* {
   margin : 0;
   padding : 0;
}
body {
   background-color : #cc9900;
}
#content {
   position : relative;
   width : 949px;
   margin : 0 auto;
   padding : 0;
   background-color : #999999;
}
#frise {
   position :absolute;
   left : 0px;
   width : 786px;
   height : 169px;
   border-top : 18px solid #660000;
   border-right : 18px;
   border-bottom : 18px;
   border-left : 18px;
}
#menu {
   position : absolute;
   top : 0px;
   left : 786px;
   width : 163px;
   height : 169px;
   background-image : url(images/menu.png);
   background-repeat : no-repeat;
   background-color : #ffffff;
   font-size : 0.9em;
   font-family : Tahoma;
   font-weight : normal;
   color : #ffffff;
   line-height : 10px;
   border-top-width : 18px;
   border-right-width : 18px;
   border-left-width : 18px;
   border-top-style : solid;
   border-top-color : #660000;
   border-right-color : #660000;
   border-bottom-color : #660000;
   border-left-color : #660000;
}
#menu ul {
   margin : 0.3em 0 0 0.4em;
}
#menu li a {
   display : block;
   list-style-position : inside;
   list-style-image : url(images/puce.gif);
   text-decoration : none;
   height : 0.8em;
   color : white;
   font-weight : bold;
   font-size : 100%;
   text-indent : px;
}
#menu li a:hover {
   background : #cccc33;
   color : #336600;
}
#logo {
   position : absolute;
   top : 187px;
   left : 0px;
   width : 456px;
   height : 124px;
}
#essai-mep2-05 {
position : absolute;
top : 186px;
left : 456px;
width : 493px;
height : 124px;
font-family : Georgia, "Times New Roman", Times, serif;
font-weight : bold;
background-color : #ffffff;
}
#principal {
   position : absolute;
   top : 310px;
   width : 929px;
   left : 0px;
   background-color : #ffffff;
   padding-right : 0;
   padding-left : 20px;
   margin-right : 20px;
   margin-bottom : 20px;
}

#principal li{
   margin : 0px 0px 0px 30px;
   text-decoration: circle;
}


.espacePetit {
	line-height: 4px;
}



#mentions {
	position : relative;
	left : -20px;
    padding-right : 0px;
	padding-left :-20px;
	margin-right : 0px;
	margin-bottom : 0px;
	text-align : center;
	color : #ffffff;
	font-size : 13px;
	background-color : #660000;
	height : 18px;
	float : none;
	width : 929px;
	top: 20px;
}
#mentions p {
   color : #ffffff;
}
#mentions a {
    color : #ffffff;
}

#Abus {
	position : relative;
	text-align : center;
	color : #cccccc;
    top: -40px;
}
#Abus p {
   color : #cccccc;
}

p {
   color : #660000;
   font-family : Verdana, Arial, Helvetica, sans-serif;
   font-size : 0.8em;
}


h2 {
   font-size : 14px;
font-weight : bold;
color : #660000;
font-family : Tahoma;
}
h1 {
font-family : Tahoma;
font-size : 16px;
font-style : normal;
font-weight : bold;
color : #660000;
}
li {
font-family : Verdana, Arial, Helvetica, sans-serif;
font-size : 0.8em;
color : #660000;
}
.citation {
font-style : italic;
font-size : 0.7em;
text-align : right;
font-weight : bold;
margin-top : 6px;
margin-right : 15px;
line-height : 11px;
}
.bordureImage {
padding : 10px;
}
#parchemin {
background-image : url(images/parchemin.jpg);
background-repeat : no-repeat;
background-position : center center;
height : 283px;
width : 255px;
}
.centre {
text-align : center;
}

voici le CSS pour IE 7


/* CSS Document */

* {
   margin : 0;
   padding : 0;
}
body {
   background-color : #cc9900;
}
#content {
   position : relative;
   width : 949px;
   margin : 0 auto;
   padding : 0;
   background-color : #999999;
}
#frise {
   position :absolute;
   left : 0px;
   width : 786px;
   height : 169px;
   border-top : 18px solid #660000;
   border-right : 18px;
   border-bottom : 18px;
   border-left : 18px;
}
#menu {
   position : absolute;
   top : 0px;
   left : 786px;
   width : 163px;
   height : 169px;
   background-image : url(images/menu.png);
   background-repeat : no-repeat;
   background-color : #ffffff;
   font-size : 0.9em;
   font-family : Tahoma;
   font-weight : normal;
   color : #ffffff;
   line-height : 10px;
   border-top-width : 18px;
   border-right-width : 18px;
   border-left-width : 18px;
   border-top-style : solid;
   border-top-color : #660000;
   border-right-color : #660000;
   border-bottom-color : #660000;
   border-left-color : #660000;
}
#menu ul {
   margin : 0.3em 0 0 0.4em;
}
#menu li a {
   display : block;
   list-style-position : inside;
   list-style-image : url(images/puce.gif);
   text-decoration : none;
   height : 0.8em;
   color : white;
   font-weight : bold;
   font-size : 100%;
   text-indent : px;
}
#menu li a:hover {
   background : #cccc33;
   color : #336600;
}
#logo {
   position : absolute;
   top : 187px;
   left : 0px;
   width : 456px;
   height : 124px;
}
#essai-mep2-05 {
position : absolute;
top : 186px;
left : 456px;
width : 493px;
height : 124px;
font-family : Georgia, "Times New Roman", Times, serif;
font-weight : bold;
background-color : #ffffff;
}
#principal {
   position : absolute;
   top : 310px;
   width : 929px;
   left : 0px;
   background-color : #ffffff;
   padding-right : 0;
   padding-left : 20px;
   margin-right : 20px;
   margin-bottom : 20px;
}

#principal li{
   margin : 0px 0px 0px 30px;
   text-decoration: circle;
}


.espacePetit {
	line-height: 4px;
}



#mentions {
	position : relative;
	left : -20px;
    padding-right : 0px;
	padding-left :-20px;
	margin-right : 0px;
	margin-bottom : 0px;
	text-align : center;
	color : #ffffff;
	font-size : 13px;
	background-color : #660000;
	height : 18px;
	float : none;
	width : 929px;
	top: 20px;
}
#mentions p {
   color : #ffffff;
}
#mentions a {
    color : #ffffff;
}

#Abus {
	position : relative;
	text-align : center;
	color : #cccccc;
    top: -40px;
}
#Abus p {
   color : #cccccc;
}

p {
   color : #660000;
   font-family : Verdana, Arial, Helvetica, sans-serif;
   font-size : 0.8em;
}


h2 {
   font-size : 14px;
font-weight : bold;
color : #660000;
font-family : Tahoma;
}
h1 {
font-family : Tahoma;
font-size : 16px;
font-style : normal;
font-weight : bold;
color : #660000;
}
li {
font-family : Verdana, Arial, Helvetica, sans-serif;
font-size : 0.8em;
color : #660000;
}
.citation {
font-style : italic;
font-size : 0.7em;
text-align : right;
font-weight : bold;
margin-top : 6px;
margin-right : 15px;
line-height : 11px;
}
.bordureImage {
padding : 10px;
}
#parchemin {
background-image : url(images/parchemin.jpg);
background-repeat : no-repeat;
background-position : center center;
height : 283px;
width : 255px;
}
.centre {
text-align : center;
}

voici le code source


<!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>Lalandier - Le sp&eacute;cialiste du vin de la vall&eacute;e du Rh&ocirc;ne</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<!--[if IE 7]><link rel="stylesheet" type="text/css" href="ie7.css" /><![endif]-->
<!--[if IE 6]><link rel="stylesheet" type="text/css" href="ie6.css" /><![endif]-->
</head>
<body>
<div id="content">
 <div id="frise"><img src="images/frise2.jpg" width="786" height="169" alt="" /></div>
 <div id="menu">
  <? include ("menu.php");?>
 </div>
 <div id="logo"><img src="images/logo_slogan.jpg" width="456" height="124" alt="" /></div>
 <div id="essai-mep2-05"><br />
  <?php include("include/citation_evenements_inc.php"); ?>
  <br />
  <br />
 </div>
 <!--   fin div menu
 -->
 <div id="principal"><br />
  <?php include("evenements_inc.php"); ?><br />

  <div id="mentions">
   <p>R&eacute;alisation <a href="http://www.cestdifferent.fr">C&acute;est Diff&eacute;rent</a> - Juillet 2007 - <a href="Mentions%20legales.php" target="_blank">Mentions l&eacute;gales</a></p>
  </div>
  <div id="Abus">
   <p>L&acute;abus d&acute;alcool est dangereux pour la sant&eacute;, consommez avec mod&eacute;ration.</p>
  </div>
 </div>
 <!-- fin div principal  -->
</div>
<!-- fin div content  -->
</body>
</html>

Vraiment, je ne vois pas l'erreur que j'ai faite et mon site doit être en ligne depuis plus d'une semaine... Voici le lien http://www.cestdifferent.fr/clients/lalandier/lalandier/index.php. Vraiment ce serait très gentil de me sortir de cette galère. Merci d'avance.

Merci de votre aide.
Modifié par helazo (30 Jul 2007 - 17:42)

Raphael

Administrateur

30 Jul 2007 à 17:15

Bonjour et bienvenue parmi nous Smiley smile

En tant que modérateur, je me dois de te faire remarquer que tu n'as malheureusement pas respecté l'une des Règles de base du forum qui est d'afficher les codes et exemples proprement à l'aide des boutons [ code]... ici ton code HTML, CSS, PHP, etc.[ /code] (sans espace).

Je te remercie par avance de bien vouloir éditer ton message afin de le rendre conforme à cette règle. Smiley cligne

D'ailleurs, je rappelle que le lien qui apparaît en bandeau tout en haut du forum ("Nouveau sur le forum ?...") est important. Il contient des pistes de recherche, des indications sur les règles de vie de la communauté, etc.
Il serait courtois de ta part de bien vouloir en prendre connaissance.

Bonne continuation Smiley smile

helazo

30 Jul 2007 à 17:49

Désolée, je ferais plus attention dorénavant. Ce n'est pas une question de courtoisie, c'est juste c'est la première fois que j'utilise ce forum tant je suis déses pérée avec mon pb de css, j'en ai oublie que que j'ai lu avant. MILLE EXCUSES. Merci en tout cas de m'avoir prévenue.

Sujet clos

CSS et mise en forme, CSS3

Affichage different sous IE6 et sous IE 7