Alignement vertical de texte dans deux boites

Bonjour,
Je mets deux boites (colonnes) côte à côte et je tape un simple texte dans les deux mais le texte de droite est plus bas de quelques pixels. Si je ne mets pas le texte en niveau de titre 3 tout est OK. D'où vient le pb ? et bien sur comment y remédier ?

<div id="compact">
<div id="compactgauche">
<h3>blablabla</h3>
</div>

<div id="compactdroite"> 
<h3>blablabla</h3>
</div> 
</div>

#compact 
{
margin-top:10px; 
width 100%;
}

#compactgauche 
{
float: left; 
margin: 0 20px 0 10px; 
width:48%; 
text-align:left;
border: 1px solid blue;
}

#compactdroite 
{ 
margin: 0 10px 0 20px; 
text-align:left;
border: 1px solid red;
}

h3 
{
color: #6B6C96; 
font-size: 1.2em;
}

merci !
Modifié par Misange (20 Jan 2007 - 18:32)

Si tu rajoutes un padding: 1px 0; à tes deux blocs, la différence devrait disparaitre.

C'est un problème de fusion des marges.

Bonsoir

Précise les marges pour H3, par exemple : margin: 1em 0; (ce qui veut dire 1em pour le haut et le bas, 0 pour la gauche et la droite).

@ Florent : il ne peut pas s'agir de fusion des marges du fait des bordures
Modifié par Alan (20 Jan 2007 - 20:57)

Merci Alan et Florent c'est effectivement la bonne solution. Ce qui m'amène à une autre question : comment sont définies par défaut les margin et padding des H1, H2 .... et est ce que ces définitions sont les même dans tous les explorateurs ou faut-il systématiquement les préciser ? Je viens de voir que j'avais le même problème avec des listes. Est ce que ces margin et padding sont d'une façon ou d'une autre en relation avec la taille de la police par défaut ?
Modifié par Misange (21 Jan 2007 - 11:33)

Bonjour,

Ah... Les styles de l'agent utilisateur, sujet inépuisable de joies diverses et varies

En bref :
- chaque navigateur applique à chaque boîte CSS générée par chaque élément (X)HTML une ou plusieurs propriétés de rendu visuel, directement grâce à une feuille de style locale utilisée par le navigateur (Cas de Firefox) ou indirectement via un mécanisme similaire (IE, Opera).

-ces rendus par défaut des éléments HTML visent à obtenir un affichage compréhensible en l'absence des styles de l'auteur (ceux du site).

-mais ils ne sont pas normalisés actuellement: chaque navigateur peut adopter ses propres styles par défaut.

On constate actuellement une certaine tendance à harmoniser ces styles par défauts entre navigateurs. Mais il reste quelques classiques à gérer par soi-même, dont en particulier:

- body et sa marge de 8px (padding/margin)
- les listes ul/ol et leur espace à gauche (padding/margin)
- les éléments form et leurs marges inférieures/supérieures

D'autres éléments ont des styles similaires dans tous les navigateurs. C'est le cas des titres.

Enfin, les marges par défaut peuvent en effet (et sont le plus souvent) être relatives à la taille des caractères côté utilisateur, puisqu'elles sont exprimées ou gérées en em (Ce qui est une sottise, mais bon, passons).

Concrètement, on commence souvent sa feuille de style en se simplifiant la vie et en ramenant à zéro les propriétés concernées pour les éléments problématiques: body,form, ol, ul {margin: 0, padding: 0} par exemple.

Pour ramener tous les éléments à des styles identiques par défaut en supprimant en particulier les marges et padding, ou en rendant ceux-ci fixes (pixels), c'est en revanche beaucoup plus lourd, et potentiellement pénible à actualiser quand un navigateur modifie son comportement à l'occasion d'une nouvelle version Sans compter que ces marges par défaut peuvent se révéler fort utiles, et éviter d'avoir à alourdir sa CSS en provéyant toutes sortes de cas de figure.

Bref, à part les cas classiques de body, ul, ol et éventuellement form, à chacun de déterminer les styles par défaut qu'il gère en début de ses CSS...

Alan a écrit :
Précise les marges pour H3, par exemple : margin: 1em 0; (ce qui veut dire 1em pour le haut et le bas, 0 pour la gauche et la droite).

Ben c'est pas déjà la valeur par défaut ?

Alan a écrit :
@ Florent : il ne peut pas s'agir de fusion des marges du fait des bordures

Oups, j'ai lu trop vite le code CSS...
Par contre du coup je ne comprends pas d'où venait le problème...

Laurent Denis a écrit :
Enfin, les marges par défaut peuvent en effet (et sont le plus souvent) être relatives à la taille des caractères côté utilisateur, puisqu'elles sont exprimées ou gérées en em (Ce qui est une sottise, mais bon, passons).

Euh... je veux bien passer, mais je comprends pas trop pourquoi ça serait problématique, s'agissant des marges verticales ?
Modifié par Florent V. (21 Jan 2007 - 16:28)

Florent V. a écrit :

Par contre du coup je ne comprends pas d'où venait le problème...

Le problème venait d'Internet Explorer : quand un conteneur est doté de layout (ici c'est avec la propriété float, mais ça aurait pu être une simple largeur, un positionnement absolu etc...), la marge supérieure par défaut de son premier enfant ne s'applique pas.

Pour remédier à ce problème il suffit de préciser une valeur pour les marges de l'élément (l'enfant en question), même si c'est identique à la valeur par défaut !

Pour la marge inférieure par défaut du dernier enfant, ça semble étrangement dépendre des éléments (pour P ça ne s'applique pas, pour Hn ou UL si)
Enfin bon, je n'ai pas non plus fait des tests poussés...

Le problème existe toujours avec IE7 (mode quirks ou standard).

facilement testable avec par exemple :

<div style="border: 1px solid black; zoom:1 ">
  <p>test</p>
</div>

avec et sans le zoom:1
Modifié par Alan (21 Jan 2007 - 20:49)

Alan a écrit :
Le problème venait d'Internet Explorer : quand un conteneur est doté de layout (ici c'est avec la propriété float, mais ça aurait pu être une simple largeur, un positionnement absolu etc...), la marge supérieure par défaut de son premier enfant ne s'applique pas.

Pour remédier à ce problème il suffit de préciser une valeur pour les marges de l'élément (l'enfant en question), même si c'est identique à la valeur par défaut !

Merci de l'info. Je ne le connaissais pas, celui là...