28172 sujets

CSS et mise en forme, CSS3

Bataille avec une fusion de marge

Bonjour,

Je fais appel à vous parce que je comprend plus rien , j'ai un problème de fusion de marge que j'arrive pas à régler sous IE7 (surement IE6).

j'ai lu cet article http://www.alsacreations.com/article/lire/629-fusion-des-marges.html

et j'ai toujours le problème malgré les 3 techniques utilisées. 


<style type="text/css">
			* {
				padding : 0;
				margin : 0;
				border : 0;
			}
			
			html {
				font-size: 100%;
			}
						
			body {
				margin : 0;
				padding : 0;
				text-align : center;
				color : #fff;
				font-family : "Arial", "Courier monospace";
			}
			
			
			#wrap {
				position : relative;
				text-align : left;
				margin : 0 auto;
				width : 1000px;
			}
			
			h1 {
				text-indent : -1500px;
				height : 0;
			}
			
			h3 {
				padding : 5px;
				margin-top : 25px;
			}
			
			p {
				padding : 5px 10px;
				font-family : "Courier monospace";
			}
			
			#divgauche {
				float : left;
				width : 290px;
				padding-top : 375px;
				background : #bae699;
			}
			
			#menu li a {
				display : block;
				font-weight : bold;
				height : 25px;
				line-height : 25px;
				font-size : 20px;
				text-decoration : none;
			}
				
			#divcentrale {
				overflow : hidden;
				margin-top : 50px;
				padding : 275px 25px 25px;
				border : 1px solid #fff;
				float : left;
				width : 649px;
				background : #402b1c;
			}
			
		</style>



<?xml version="1.0" encoding="utf-8"?>
<!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" lang="fr">
    <head>
	<meta http-equiv="content-type" 
		content="text/html;charset=utf-8" />
	<meta http-equiv="Content-Style-Type" content="text/css" /> 
		<title>Mon title</title>
    </head>
    <body>
    	<div id="wrap">
    		<h1>Titre</h1>
			<div id="divgauche">
				<ul id="menu">
				<li><a href="#l">Accueil</a></li>
				<li><a href="#"  class="actuel">Menu</a></li>
				<li><a href="#">Infos Pratiques</a></li>
				<li><a href="#">Photos</a></li>
				<li><a href="#">Contact</a></li>
				</ul>
			</div>
			<div id="divcentrale">
				<h3>Le Machin...</h3>
				<p>Ici du texte du texte du texte</p>
				 <h3>Le Bidule...</h3>
				 
			</div>
    	</div>
    </body>
</html>


mon premier H3 fusionne sa marge avec celle de #divcentrale, j'arrive pas à comprendre pourquoi !

Si vous pouviez m'eclairer, merci.
Modifié par rs459 (08 Feb 2010 - 19:02)
Bonsoir,

Quelques pistes:
- Supprime la déclaration XML. Ça perturbe IE6 (voire IE7?) et ça ne sert à rien.
- Je ne suis pas sûr qu'il s'agisse de fusion des marges ici. IE 6-7 a plutôt tendance, dans les cas particulier, à ne pas appliquer la fusion des marges.
- Il y a un bug d'IE 6-7 qui se nomme le «boudiou mais comment ça se fait que la marge de cet élément elle disparaisse sans laisser de trace?». Ça concerne notamment le margin-top du premier élément placé dans un bloc ayant le layout. Soit ça se règle en jouant sur le HasLayout (de l'élément ou de son parent), soit ça se contourne en virant la marge pour préférer un padding.
Merci, j'ai opté pour la seule solution qui a fonctionné, un &nbsp; Smiley decu

J'ai joué avec zoom, border, padding, overflow rien à faire le bug persiste malgré la suppression de la déclaration XML.

J'aurais pu essayer le padding sur le H3, le seul hic , c'est que ma déco est faite avec les border.
Modifié par rs459 (08 Feb 2010 - 22:37)
Sujet clos
Aller à