IE 7 et marges des balises

Bonsoir,

Je me rend compte de l'arrivées de quelques bug avec IE7...

Par exemple, j'ai dans mon code un div suivis d'une balise titre h2.
Je n'ai pas spécifié de marge ni pour mon div ni pour les balises HTML, donc j'obtient les marges par defaut.

Sous Firefox donc, pas de probleme mon h2 a une marge top par defaut de (j'ai oublié combien de pixel...)

Voici donc le résultat
http://undergame.fr/bazar/firefox.jpg

Sous IE 7 par contre... on dirais bien que la marge top n'existe plus
http://undergame.fr/bazar/ie7.jpg

Biensur il suffirait de mettre une marge sur mon div, mais la je cherche plutot a comprendre le pourquoi plutot que de trouver une solution.
Je pense pas avoir besoin de coller le code, c'ets vraimant au plus simple. Un div suivis d'une balise, sans marge quelquconque.

Bon week end

Hello,

supercanard a écrit :
Je pense pas avoir besoin de coller le code, c'ets vraimant au plus simple. Un div suivis d'une balise, sans marge quelquconque.

Mauvaise pioche.
Difficile de se prononcer sans savoir exactement quels sont les styles qui s'appliquent aux différents éléments.

L'idéal serait de pouvoir voir la page en ligne.

Bon j'ai compris
Histoire de rien zapper je vais mettre tout le code de mon header mais tout n'est pas utile...

#header {
background: #0099ff;
padding: 2px;
}
#menu {
overflow: auto;
}
#menu ul {
list-style-type: none;
display: inline;
}
#menu li {
float: left;
padding: 0 2px;
border-right: 1px solid #fff;
}
#menu a {
display: block;
background: none;
padding: 5px;
color: #fff;
border: 1px solid transparent;
}
#menu a:hover {
background: #bfe5ff;
color: #0099ff;
border-color: #fff;
}

#containeur {
margin: auto auto;
}

<div id="header">
<h1>iPost-it <? echo $version ?></h1>
<div id="menu">
<ul>
<li><a href="index2.php">Notes</a></li>
<?php
if ($tmp !='0'){ // SI PAS DE NOTE, PAS CETTE OPTION
	echo '<li><a href="index2.php?alerte='.$alerte2.'">Supprimer toutes les notes</a></li>';
}
?>
<li><a class="important" href="destroy.php">Fermer la session</a></li>
<li><a href="dev.php">Suivi du d&eacute;veloppement</a></li>
<li><a href="mailto:j.coulet@gmail.com?subject=iPost-it">Signaler un bug ou soumettre un avis</a></li>
</ul>
</div>
</div>

<div id="containeur" style="width: <? echo $_SESSION['session_width'] ?>px">
<h2>Mes notes [ <a href="#" onclick="affich_menu2();return(false)">Préférences d'affichage</a> ]</h2>

Bon comme j'ai tout collé... c'ets un peu brouillon : le hic se situe entre le div header, containeur et la balise h2... vous me suivez ?

Je viens de tester sur d'autres pages c'est pareil

Donc pour résumer si on met pas de margin-bottom à un div, et bien si une balise H2 se trouve juste en dessous, le titre va se retrouver collé au div du dessus...

supercanard a écrit :
Donc pour résumer si on met pas de margin-bottom à un div, et bien si une balise H2 se trouve juste en dessous, le titre va se retrouver collé au div du dessus...

Uniquement si tu as mis à zéro le margin-top du H2. Et peut-être aussi en mode Quirks. Mais si ta page est en mode standard, il n'y a pas de raison.

Ah oui : si le div est flottant, on aura effectivement le comportement que tu décris.

Rien de tout ça... quoi que, j'ai bien deux block en flottant puisqu'ils sont alignés, mais je suis pas sur si c'est de cela que tu parle.

Voilà dans mon HTML

<div id="containeur">
<div id="menu"><ul>Suite de li...</ul></div>

<div id="blockleft">
<h1>Actualité</h1>
<ul><li><a href="news.php?var=25">xcvcxvcxv</a></li>
<li><a href="news.php?var=24">fgfgfgfg g fgfg d</a></li>
</ul>
</div>

<div id="blockright">
<h1>Bienvenue</h1>
<p>blabla...</p>
</div>


</div>

Et le css correspondant :

body,html {
	font-family: verdana;
	margin: 0;
	background: #000;
}
h1 {
	font-size: 16px;
	color: #515151;
}
h2 {
	font-size: 14px;
	color: #C88D20;
}
p {
	font-size: 14px;
	color: #515151;
	text-align: justify;
}
ul {
	font-size: 14px;
	color: #515151;
	padding: 0;
	margin-left: 0; /* FIX BUG IE */
	list-style-position: inside;
}

#menu {
  margin-bottom: 50px;
}
#menu ul {
  list-style-type: none;
}
#menu li {
  float: left;
  margin-right: 1px;
  border-right: 1px solid #9bac6f;
}
#menu a {
  display: block;
  padding: 5px;
  margin-right: 1px;
  font-size: 12px;
  font-weight: bold;
  text-decoration: none;
}
#menu a:hover {
  background: url('img/bg_menu.gif');
  color: #fff;
}

#blockleft {
  clear: both;
	float: left;
	width: 250px;
	margin-right: 50px;
}
#blockleft p, #blockleft h1, #blockleft ul {
  font-size: 10px;
}
#blockright {
	float: left;
	width: 500px;
}

Dans cette exemple mes deux titres h1 se retrouvent collés au block du dessus (le menu).

Je sais que je me répète, mais... on peut voir la page en ligne ?
Modifié par Florent V. (20 Jun 2007 - 10:28)