28172 sujets

CSS et mise en forme, CSS3

Erreur d'affichage Firefox 4

Je suis sous Mac OS X 10.6.7, avec Firefox 4.0.1 en nav. principal.
J'ai un probleme car j'applique une DIV un margin-top de : 20px et un margin-bottom de 50px et il me met les 2 a 50. Tout s'affiche pourtant bien sur Chrome et Safari par contre.
Est-ce bug de FF 4 ? Comment y remédier ?
Oui bonjour a tous,

La ligne incriminée se trouve dans la CSS en gras et rouge.


La CSS :


@charset "UTF-8";
a:focus{ outline-style: none; }
*{padding: 0; margin: 0;}
html { font-size: 100%; }
body { font: 62.5% "Helvetica Neue", Helvetica, Arial, sans-serif; text-align: center; background: #EEE url('linen2.png') repeat top left; }
.clear {clear:both; height:0; width:0; }
h1, h2, h3 { font-size: 1.3em;}
h2 { font-weight: normal;}
p { margin: 0.5em 0 2em; color: gray;}
#main {
	font-size: 1.4em;
	[#red][b]margin: 20px auto 50px;[/b][/#]
	width: 900px;
	background: #fff;
	text-align: left;
}
#name { width: 350px; float: left; margin-top: 300px; padding-left: 50px; }
#details { width: 450px; float: left; padding: 50px 50px 50px 0; }
span { color: #000}


Le HTML :


<!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" lang="fr">
<head>
<title>Titre</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="content-language" content="fr" />
<meta name="keywords" lang="fr" content="" />
<link rel="stylesheet" type="text/css" href="main.css" />
</head>
<body>
<div id="main">
<div id="name">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</p>
</div>
<div id="details">
<h3>TITRE</h3> 
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum.
</p>
<h3>TITRE</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum.
</p>
<h3>TITRE</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum.
</p>
<h3>TITRE</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum.
</p>
<h3>TITRE</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum.
</p>
</div>
<div class="clear">
</div>
</body>
</html>
Bonjour je ne peux pas te dire si c'est bug ou pas mais je peux te proposer une solution à ton problème:
Tu change la propriété margin de ton élément #main en margin:20px auto 0; et dans le body tu ajoutes un padding-bottom:50px; et j'espère que cela résoudra ton problème.
Merci c'est ce que j'ai fait et ca marche, mais c'est quand meme étonnant que ca ne fasse ca que sous FF 4 et pas sous Webkit ni meme FF 3.x
Sujet clos
Aller à