28173 sujets

CSS et mise en forme, CSS3

Bug marges et float dans IE ET Firefox (pas doublement des marges)

Bonjour,

J'ai la structure suivante dans un site que j'intègre :

<div id="conteneur">
	<div id="header"></div>
	<ul id="nav">
	  <li>elements de navigation</li>
	</ul>
	[b]<div id="colleft">
		<div id="adresse">
                  <h3>Titre</h3>
		  <p>Texte</p>
		</div>
	</div>[/b]
	<div id="contenu_home">&nbsp;</div>
	<div id="colright">&nbsp;</div>
	<div id="footer"></div>
</div>


et le style correspondant :
#conteneur { width:766px; margin-left:auto; margin-right:auto; }
#header { width:766px; height:131px; background:url(/images/common/top/header.jpg) 0 0 no-repeat; }
#colleft {
float:left;
background:url(/images/common/bd_colleft.gif) 0 0 repeat-y;
padding:0 0 0 9px;
width:258px;
voice-family: "\"}\""; /* Box model hack */
voice-family:inherit;
width:249px;
}
#adresse { }
#footer { clear:both; background:url(/images/common/footer/fd_footer.gif) 0 0 no-repeat; height:27px; }


#contenu_home { float:left; width:252px; }
#colright {float:left;
padding:0 4px 0 0;
width:255px;
voice-family: "\"}\""; /* Box model hack */
voice-family:inherit;
width:251px;
}

très bizarrement, les marges naturelles de mon h3 et de mon p dans le div #adresse semblent s'appliquer à l'élément conteneur #colleft et non à eux-mêmes

je contourne en appliquant un padding mais c'est tout de même très embêtant et je voudrais comprendre d'où vient le beans...

Merci d'avance de m'éclairer de vos lumières Smiley cligne

Kephren
je dois préciser que quand je rajoute :


#adresse h3 { margin:0; }
#adresse p { margin:0; }


tout se passe comme si j'écrivais :


#adresse { margin:0; }


Voici le code de ma page (je peux pas montrer la page en ligne, c'est sur un serveur de test) :


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Titre</title>
<link href="/common/css/styles.css" rel="stylesheet" type="text/css" />
<link href="/common/css/menu.css" rel="stylesheet" type="text/css" />
<link href="/common/css/texte.css" rel="stylesheet" type="text/css" />
<script src="/common/js/utile.js" language="javascript" type="text/javascript"></script>
<!-- TemplateBeginEditable name="head" -->
<!-- TemplateEndEditable -->
</head>
<body>
<div id="conteneur">
	<div id="header"></div>
	<ul id="nav">
		<li>Element de liste</li>
		<li>Element de liste</li>
		<li>Element de liste</li>
	</ul>
	<div id="colleft">
		<div id="adresse">
			<h3>Titre</h3>
			<p>Texte</p>
		</div>
	</div>
	<div id="contenu_home">&nbsp;</div>
	<div id="colright">&nbsp;</div>
	<div id="footer"></div>
</div>
</body>
</html>


et le style qui va avec :


/********************************/
/*              HTML            */
/********************************/
body { background:#fff; margin:0; padding:0; width:100%; height:100%; font:10px Verdana, Arial, Helvetica, sans-serif; color:#007bc9; }
html { width:100%; height:100%; }
a { text-decoration:underline; color:#007bc9; }
a:hover { text-decoration:none; }
img { border:none; }
h1 { /* titres 14px  */ font-size:14px; font-weight:bold; }
h2 { /* titres 12px  */ font-size:12px; font-weight:bold; }
h3 { /* titres 10px */ font-size:10px; font-weight:bold; }
h4 {}
h5 { font-size:9px; font-weight:normal; }
h6 {}
select, input, textarea { font-family:Verdana, Arial, Helvetica, sans-serif; font-size:10px; color:#016093; background:#e0f4fc; }



/********************************/
/*           STRUCTURE          */
/********************************/
#conteneur { width:766px; margin-left:auto; margin-right:auto; }
#header { width:766px; height:131px; background:url(/images/common/top/header.jpg) 0 0 no-repeat; }
#colleft { 
	float:left; 
	background:url(/images/common/bd_colleft.gif) 0 0 repeat-y;
	margin:0;
	padding:0 0 0 9px; 
  width:249px;
	display:inline;
}

#newsletter { background:url(/images/common/colleft/fd_newsletter.gif) 0 0 repeat-y; }
#newsletter img.titre { padding:13px 0 0 8px; display:block; }
#newsletter form { margin:0; padding:7px 0 5px 8px; }
#newsletter input { margin:0; padding:0; }
#newsletter form p { margin:0; padding:0; }
#adresse { background:url(/images/common/colleft/fd_adresse.gif) 0 0 repeat-y; }
#adresse h3 { margin:0; }
#adresse p { margin:0; }

#contenu {}
#footer { clear:both; background:url(/images/common/footer/fd_footer.gif) 0 0 no-repeat; height:27px; }


/********************************/
/*              HOME            */
/********************************/
#contenu_home { float:left; width:252px; background:#ebeef0 url(/images/common/fd_contenu_home.gif) 0 0 repeat-x; }
#colright {
	float:left; 
	background:url(/images/common/bd_colright.gif) right 0 repeat-y; 
	padding:0 4px 0 0; 
	width:255px; 
  voice-family: "\"}\""; /* Box model hack */
  voice-family:inherit;
  width:251px;
}

/********************************/
/*            SPECIFIC          */
/********************************/
div.separation { height:10px; width:100%; margin:0; padding:0; }
div.clear { clear:both; }

ul.form { /* pour le bloc newsletter */ list-style:none; margin:0; padding:5px 0; }
ul.form li { float:left; margin:0; padding:0; }
ul.form li.texte { margin:0 0 0 5px; line-height:14px; color:#fff; font-weight:bold; width:170px; }
form.alignvert input { vertical-align:middle; }
form.alignvert img { vertical-align:middle; }
Sujet clos
Aller à