28172 sujets

CSS et mise en forme, CSS3

Différence d'affichage ie firefox float left

Bonjour à tous. Smiley biggrin

Après avoir parcouru le forum et fait divers tests, je me décide à poster un message.
Je pensais avoir compris le comportement de float et voila qu'en faisant une mise en page simple, je n'arrive pas à avoir deux pages identiques sur firefox et sur internet explorer. Smiley bawling

ci dessous le code


<!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>
		<style>
			html{
				background-color:purple;
			}
			body{
				width:500px;
				margin-left: auto;
				margin-right: auto;
				border:1px black;
				background-color:blue;
			}
			#mydiv1{
				float:left;
				border:1px solid;
				position:relative;
				left:-100px;
				width:100px;
				background-color:orange;
			}
			#mydiv2{
				height: 250px;
				background-color:green;
			}
		</style>
	</head>
	<body>
		<div id="mydiv1">
			ma div floaté
		</div>
		<div id="mydiv2">
			ma div suivante
		</div>
	</body>
</html>


je voudrais avoir sous ie (version 6 chez moi) la meme chose qu'avec firefox (3.0 toujours chez moi)

merci d'avance pour vos réponse. Smiley cligne
Modifié par tremran (23 Jan 2010 - 14:11)
Hello tremran et bienvenue,

je t'accorde que le rendu d'IE6 est inattendu mais il faut dire que la méthode que tu utilises l'est également Smiley cligne :

le float:left va sortir l'élément du flux et le coller à gauche mais pourquoi rajouter un position:relative et un left:-100px ? Pour rappel ce positionnement réserve l'espace originel dans le flux puis effectue le décalage.

Par rapport au résultat que tu sembles rechercher tu pourrais faire :
<!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" media="screen">
body{
	margin: 0;
	padding: 0;
	background:purple;
}

#global {
	width: 700px;
	margin: 0 auto;
}

#mydiv1{
	float: left;
	border: 1px solid black;
	width: 98px;
	background-color: orange;
}

#mydiv2{
	height: 250px;
	margin: 0 98px;
	padding: 0 5px;
	background: green;
	border: 1px solid black;
}
</style>
<!--[if lt IE 7]>
<style type="text/css" media="screen">
#mydiv2{ /* correction du three pixels jog */
	position: relative;
	left: -3px;
}
</style>
<![endif]-->
</head>
<body>
	<div id="global">
		<div id="mydiv1">
			ma div floatée
		</div>
		<div id="mydiv2">
			ma div suivante
		</div>
	</div>
</body>
</html>
Plus généralement (re)lire le Guide de survie du positionnement CSS.
Modifié par Heyoan (23 Jan 2010 - 18:20)
Sujet clos
Aller à