28220 sujets

CSS et mise en forme, CSS3

Bonjour,

je suis désolé de Smiley re posé cette question ,mais je ne trouve rien pour arranger mon problème...

j'ai un bloc contenant une liste ("menu") qui flotte (left) à coté d'un autre bloc ("content").

Je rencontre un problème de décalage sous IE..

j'ai testé le display:inline... mais çà ne change rien... ci joint deux copies écrans. upload/319-01.gif

je sais que cela à déjà été abordé, mais je ne retrouve pas les postes.

En gros si je supprime l'état flottant le bloc se repositionne bien à gauche...



#menu {
	width:194px;
	background-color:#272727;
	border-left:1px solid #000;
	float:left;
	list-style-type:none;
	text-align:right;
	padding:0 8px 0 0;
	}

#content {
	margin-left:203px;
	background-color:#E3E3E3;
	border-right:1px solid #000;
	border-left:1px solid #fff;
	}		




<ul id="menu">
		<li><a href="">Accueil</a></li>
		<li><a href="">Production</a></li>
		<li><a href="">Web</a></li>
		<li><a href="">Multimédia</a></li>
		<li><a href="">Video / DVD</a></li>
		<li><a href="">Photographie</a></li>
		<li><a href="">Espace clients</a></li>
	</ul>
	<div id="content">
		<div id="subheader">
			<h2><span>Accueil</span></h2>
			<ul id="submenu">
				<li><a href="">présentation</a> |</li>
				<li><a href="">références</a> |</li>
				<li><a href="">contacts</a></li>
			</ul>
		</div>
		<p>Contenu pipo des bois</p>
	</div>



Merci.
La feuille intègre déjà cette règle... j'ai aussi relus le billet de Raphaël sur son blog niveau méthodologie avant de me jeter par la fenêtre....

C'est vraiment un bogue de daube.

Je suis sur que çà tiens à rien en un ligne dans une feuille additionnelle insérée sous conditions… mais je sèche.

<!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=UTF-8" />
<title>société</title>
<style type="text/css" media="screen">
<!--
@import url("/style.css");
-->
</style>


<!--[if lte IE 6]>
<style type="text/css" media="screen">
@import url(/IE.css);
</style>
<![endif]-->

</head>

<body>
<div id="wrapper">
	<div id="header">
		<h1><span>société</span></h1>
	</div>
	<ul id="menu">
		<li><a href="">Accueil</a></li>
		<li><a href="">Production</a></li>
		<li><a href="">Web</a></li>
		<li><a href="">Multimédia</a></li>
		<li><a href="">Video / DVD</a></li>
		<li><a href="">Photographie</a></li>
		<li><a href="">Espace clients</a></li>
	</ul>
	<div id="content">
		<div id="subheader">
			<h2><span>Accueil</span></h2>
			<ul id="submenu">
				<li><a href="">présentation</a> |</li>
				<li><a href="">références</a> |</li>
				<li><a href="">contacts</a></li>
			</ul>
		</div>
		<p>Which alters when it alteration finds, let me not to the marriage of true minds love's not time's fool, though rosy lips and cheeks. That looks on tempests and is never shaken; within his bending sickle's compass come; whose worth's unknown, although his height be taken. Admit impediments; love is not love I never writ, nor no man ever loved. Which alters when it alteration finds, but bears it out even to the edge of doom.</p>
		<p>Love's not time's fool, though rosy lips and cheeks that looks on tempests and is never shaken; love alters not with his brief hours and weeks. Within his bending sickle's compass come. Love's not time's fool, though rosy lips and cheeks whose worth's unknown, although his height be taken. That looks on tempests and is never shaken; admit impediments; love is not love let me not to the marriage of true minds. I never writ, nor no man ever loved.</p>
		<p>Love alters not with his brief hours and weeks, but bears it out even to the edge of doom. Oh, no, it is an ever fixed mark admit impediments; love is not love or bends with the remover to remove. That looks on tempests and is never shaken; let me not to the marriage of true minds if this be error and upon me proved.</p>
		<p>Love's not time's fool, though rosy lips and cheeks let me not to the marriage of true minds it is the star to every wand'ring bark. Which alters when it alteration finds, that looks on tempests and is never shaken; but bears it out even to the edge of doom. Oh, no, it is an ever fixed mark within his bending sickle's compass come; it is the star to every wand'ring bark.</p>
		<p>Which alters when it alteration finds, I never writ, nor no man ever loved. That looks on tempests and is never shaken; or bends with the remover to remove. Admit impediments; love is not love.</p>
	</div>
	<div id="footer">
		<p>
			footer texte
		</p>
	</div>
</div>	
</body>
</html>


la feuille

* {padding:0; margin:0;}

body, html {
	height:100%;
	}

body {
	background-color: #272727;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:small;
	background-image:url(/images/backgeneral.gif);
	background-repeat:repeat-y;
	background-position:center;	
	}
	
#wrapper {
	height:100%;
	width:760px;
	margin-right: auto;
	margin-left: auto;
	}	
	
	
	
	
/* ------ */	
/* HEADER */
/* ------ */

#header {
	background-color: #FFAE23;
	height: 50px;
	border:1px solid #000;
	border-bottom:1px solid #434343;
	}
	
#header h1 {
	background-image:url(/images/logo-latribu.gif);
	background-repeat:no-repeat;
	background-position:right;
	height:50px;
	margin-right:10px;
}	
#header h1 span {
	display:none;
	}
	



/* ---- */
/* MENU */
/* ---- */

#menu {
	width:194px;
	background-color:#272727;
	border-left:1px solid #000;
	float:left;
	list-style-type:none;
	text-align:right;
	padding:0 8px 0 0;
	}

#content {
	margin-left:203px;
	background-color:#E3E3E3;
	border-right:1px solid #000;
	border-left:1px solid #fff;
	}		

#subheader {
	height:145px;
	background-position:top;
	background-image:url(/images/back-content.jpg);
	background-repeat:repeat-x;
	}
	
#subheader h2{
	position:relative;
	top:26px;
	background-image:url(/images/accueil.jpg);
	background-position:right;
	background-repeat:no-repeat;
	height:87px;
	}	

#subheader h2 span {
	display:none;
	}	

#content p {
	font-size:x-small;
	padding:5px 5px 10px 5px;
	line-height:1.5em;
	color:#424242;
	}

#submenu {
	position:absolute;
	list-style-type:none;
	top:174px;
	margin-left:5px;
	}
	
#submenu li {
	display:inline;
	}
	
#submenu li a {
	color:#000;
	text-decoration:none;
}	
	
	
	
/* FOOTER */
#footer {
	padding:20px 0 5px 0;
	margin-left:203px;
	font-size:xx-small;
	text-align:center;
	background-color:#E3E3E3;
	border-right:1px solid #000;
	border-left:1px solid #fff;
	}		



y'a encore rien dans IE.css c'est en prévision Smiley smile

Merci de ton aide j'me sens moins seul. Smiley lol
Je résume :

Sous Mac OSX 10.4.2
FF 1.07 ok
Opéra 8.2 décalage d'un pixel à un autre niveau (je regarderais ensuite)
IE5.2.3 complétement à la rue
Safari 2.0.1 ok

Sous PC XP pro SP2
FF 1.06 ok
IE 6 le décalage qui me rend chèvre....


Voilà merci
Modifié par ernstein (22 Sep 2005 - 19:31)
Bonjour,

Il s'agit d'un bug d'IE, le Three Pixels Jog, associé au flottant (faire une recherche sur le forum). Le titre jouxtant le flottant étant dimensionné et doté de layout, il est décalé en bloc de 3 pixels vers la droite. Si le décalage est vraiment dramatique, compenser par un déplacement en relatif ou une marge négative dans la CSS corrective prévue pour IE6.