28220 sujets

CSS et mise en forme, CSS3

[Résolu] Margin: auto > fonctionne pas sur IE

Bonjour tout le monde,

Je comprend pas pourquoi chaque fois que j'applique un margin: auto ca marche parfaitement dans Firefox mais pas du tout dans IE Smiley fache

Le Site

body {
width: 800px;
border: 1px black solid;
margin: auto;
margin-top: 20px;
margin-bottom: 20px;
font-family: Verdana, Arial, serif;
font-size:8pt;
letter-spacing:1;
color: #454648;
}

a {
color: black;
}

a:hover {
color: #A0A0A0;
}

a img {
border: none;
}

#header {
height: 214px;
background: url('images/header.jpg') center no-repeat;
}

#milieu {
padding-left: 25px;
}

#menu {
float: left;
margin-top: 20px;
margin-bottom: 0px;
margin-right: 0px;
border-left: black 1px solid;
border-right: black 1px solid;
}

#menu h3 {
margin: 0px;
margin-top: 20px;
margin-bottom: 10px;
padding-top: 3px;
padding-bottom: 3px;
border-top: black 1px solid;
border-bottom: black 1px solid;
text-align: center;
}

#menu ul {
list-style-type: none;
}

#contenu {
margin: 0px;
margin-left: 146px;
padding-top: 20px;
padding-left: 10px;
padding-right: 10px;
border-left: 1px solid black;
}

#contenu .first {
margin-top: 0px;
padding-top: 0px;
}

#contenu .last {
margin-bottom: 0px;
padding-bottom: 0px;
}

#footer {
clear: both;
height: 72px;
background: url('images/footer.jpg') center no-repeat;
}


<!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" xml:lang="fr">

	<head>
		<title>Red Style - by G!zmo</title>
		
		<meta name="author" content="Angel" />
		<meta name="generator" content="notepad++" />
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
		
		<link rel="stylesheet" media="screen" type="text/css" title="Red Style" href="style.css" />
	</head>
	
	<body>
		
		<div id="header">
		</div>
		
		<div id="milieu">
			
			<div id="menu">
				<img src="images/ligne.jpg" alt="ligne" />
				
				<h3>Menu</h3>
				
				<ul>
					<li><a href="#">Lien 1</a></li>
					<li><a href="#">Lien 2</a></li>
					<li><a href="#">Lien 3</a></li>
				</ul>	
				
				<img src="images/ligne.jpg" alt="ligne" />
			</div>
			
			<div id="contenu">
				
				<p class="first">
					Vivamus non tellus ut ligula luctus posuere. Nam neque nibh, lobortis vel, consequat at, sollicitudin commodo, purus elit nulla feugiat enim, 
					vel scelerisque quam elit sed purus. Suspendisse potenti. Ut vel eros. Nunc viverra venenatis sem. Mauris congue libero non dolor fermentum scelerisque.
				</p>
				
				<p>
					Pellentesque porta velit vel purus. Proin fringilla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. 
					Praesent aliquam, eros sodales rutrum ornare, ipsum mi condimentum nibh, in vestibulum sem urna vehicula odio.a velit. In facilisis arcu sed enim. 
					In molestie eleifend libero.
				</p>
				
				<p>
					Vivamus non tellus ut ligula luctus posuere. Nam neque nibh, lobortis vel, consequat at, sollicitudin commodo, purus elit nulla feugiat enim, 
					vel scelerisque quam elit sed purus. Suspendisse potenti. Ut vel eros. Nunc viverra venenatis sem. Mauris congue libero non dolor fermentum scelerisque.
				</p>
				
				<p class="last">
					Pellentesque porta velit vel purus. Proin fringilla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. 
					Praesent aliquam, eros sodales rutrum ornare, ipsum mi condimentum nibh, in vestibulum sem urna vehicula odio.a velit. In facilisis arcu sed enim. 
					In molestie eleifend libero.
				</p>
				
			</div>
			
		</div>
		
		<div id="footer">
		</div>
		
	</body>
	
</html>


Il y aussi un autre problème avec l'espacement dans le menu qui est énorme dans IE Smiley confus

Merci d'avance pour vos réponses Smiley cligne
Modifié par Angel (20 Mar 2005 - 17:45)
Pour le menu et IE, "normal", enfin rien de suprenant disons Smiley cligne
IE double les marges sur les éléments flottant (va savoir pourquoi Smiley lol )
Donc, où tu ne marges pas les éléments en float, ou tu met des piti hacks pour IE (pwaa berrk).

Pour le margin: auto; à priori ça fonctionne sous IE6 (pas avant), quel est l'effet recherché ? Le centrage je suppose.

T'as pas moyen de dimenssioner un conteneur autre que body et de le marger ?
Genre, tu met un piti div conteneur qui contient l'ensemble de ta page, tu le dimenssionne, tu le marges, et roulez jeunesse.

Tu met text-align: center; dans le body (en rétablissant text-align: left; dans le div conteneur) pour les IE < 6 et wala wala !
Et pour le margin:auto, tu vas rire : IE ne le gère pas.

Tu peux contourner le problème en définissant un text-align: center dans l'élément parent de l'élément à centrer, car IE interprète mal cette propriété, ce qui fait qu'elle centre tout et surtout n'importe quoi, mais dans ce cas c'est utile.

#parentdelelementacentrer { text-align: center; }
#elementacentrer { text-align: left; margin: 0 auto; }
Apparament S.F. à raison, sans le "text-align: center" le site reste à gauche. Mais je trouve sa bizare il me semble avoir déjà utilisé "margin: auto" et ca marchait très bien dans IE Smiley confus
Avec le text-align: center; c'est sûr que ça fonctionnera oui, mais je confirme que margin: auto; fonctionne sous IE. C'est sûrement qu'il n'apprecie pas qu'il soit dans le body, le body n'ayant peut être pas d'élément parent pour IE.

Enfin, tant que ça fonctionne Smiley cligne

Manque plus qu'un piti Smiley resolu nan ?
Modifié par Olivier (20 Mar 2005 - 17:43)
Sujet clos
Aller à