28220 sujets

CSS et mise en forme, CSS3

[Résolu] Décalages sous IE...

Madame, Mademoiselle, Monsieur,
Bonjour

Je suis victime d'un étrange phénomène sous... IE PC !
Le code suivant fonctionne très bien sous FF : les titres et les textes sont bien alignés, mes bordures apparaissent bien, mes blocs sont bien colés les uns aux autres.
Sous IE, les élements textes se décalent successivement sur la gauche...


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Document sans nom</title>
<style type="text/css">
<!--
#menuFixe div {
	margin: 0;
	padding: 2px 0 1px 0;
	border-left-width: 8px;
	border-left-style: solid;

}
#menuFixe_Pave1 {
	background-color: #40668c;
	border-left-color: #036;
}
#menuFixe_Pave2 {
	background-color: #8099b3;
	border-left-color: #40668C;
}
#menuFixe_Pave3 {
	background-color: #c0ccd9;
	border-left-color: #8099B3;
	background-repeat: no-repeat;
	background-position: center bottom;
	height: 220px;
}


#menuFixe h2 {
	color: #fff;
	margin-bottom: 5px;
	font-size: 1.1em;
	font-family: Georgia, "Times New Roman", Times, serif;
	padding-left: 10px;
	font-style: italic;
}
#menuFixe ul {
	list-style-type: none;
	margin: 0 0 1em 0;
	padding: 0;
}
#menuFixe ul li {
	margin: 0;
	padding: 0;
}

#menuFixe a {
	font-size: 0.9em;
	text-decoration: none;
	margin-left: 6px;
	padding-left: 8px;
}
-->
</style>
</head>

<body>

<div id="menuFixe">
	<h2 id="menuFixeLogo" class="logoSVV"><span>Grenier à Sel</span></h2>
	<div id="menuFixe_Pave1">
		<h2 id="Search">Titre 1 </h2>
		<form name="Search" method="post" action="">
		<input type="text" name="textfield" />
		<input name="Submit" type="submit" class="ok" value="Ok" />
		</form>
		<p><a href="javascript:;">Recherche avanc&eacute;e </a></p>
		<h2>Nos ventes aux ench&egrave;res </h2>
		<ul>
		<li><a href="javascript:;">Vente sur 20/06/05</a></li>
		<li><a href="javascript:;">Vente du 16/07/05</a></li>
		<li><a href="javascript:;">R&eacute;sultats</a></li>
		</ul>
	</div>
	
  <div id="menuFixe_Pave2">
		<h2>Titre 2</h2>
		<ul>
		<li><a href="javascript:;">Compte client</a></li>
		<li><a href="javascript:;">News Letter</a></li>
		<li><a href="javascript:;">Ordres d'achat</a></li>
		</ul>
	</div>	  
		  
	<div class="blocSVV" id="menuFixe_Pave3">
		<h2>Titre 3</h2>
		<ul>
		<li><a href="javascript:;">Editorial</a></li>
		<li><a href="javascript:;">Expertises</a></li>
		<li><a href="javascript:;">Top 10</a></li>
		</ul>
	</div>
</div>


</body>
</html>


Une idée ?
Modifié par piloue (26 Apr 2005 - 12:22)
Nickel, cela fonctionne.

#menuFixe div {
	margin: 0;
	padding: 2px 0 5px 0;
	border-left-width: 8px;
	border-left-style: solid;
	border-bottom-width: 1px; /* Pour contrer de facheux décalages IE */
	border-bottom-style: solid; /* Pour contrer de facheux décalages IE */
}
#menuFixe_Pave1 {
	background-color: #40668c;
	border-left-color: #036;
	border-bottom: #40668c; /* Pour contrer de facheux décalages IE */
}

Y a-t-il une explication rationnelle à cela ?
Modifié par piloue (26 Apr 2005 - 12:23)
Sujet clos
Aller à