Problème d'espacement de blocs sous deux navigateurs

Bonjour,

Le titre est merdique, je sais mais j'ai pas vraiment eu d'idée autre pour décrire mon problème.

Alors voilà, j'ai actuellement deux solutions pour faire un espacement vertical entre deux blocs. La première, margin-bottom. La seconde, faire un <br /> entre les deux et appliquer au bloc contenant les deux petits blocs un line-height. Cependant, avec ces deux solutions, il se passe cela sous Firefox et Opera (c'est bien) :
http://imageshack-france.com/out.php/i230724_Sanstitre.jpg

Mais il se passe ceci avec ces deux débiles de Safari et Google Chromium :
http://imageshack-france.com/out.php/i230726_Sanstitre2.jpg

Enfin, pour couronner le tout, Internet Explorer 7 ne me met même pas d'espace avec la technique margin-bottom, mais me fait un truc parfait avec les <br />.

Que dois-je faire ? Y a-t'il une autre solution à laquelle je n'aurais pas pensé ?

Merci pour vos réponses.

Cordialement,

TULLE.

le but de css étant de séparer les informations de leur mise en forme utiliser un <br> pour de la mise en forme n'est peut être pas judicieux

en ce qui concerne ton problème j'avoue ne pas bien saisir la différence entre tes deux images

L'espace entre les deux blocs en haut est plus grand sur l'image en bas. Je veux que cet espace soit le même que l'espace à droite.

Le <br /> est une autre solution que j'ai trouvé, mais ne marche pas sur tous les navigateurs encore.

dans un premier temps vérifie que les navigateurs ne fonctionnent pas en mode natif (pour cela il faut vérifier que tu as bien le bon doctype dans le head de la page avec le lien )

ensuite vire tous les margin / padding
met les tous à 0 (même ceux de body afin qu'il n'y ai pas d'héritage)
pareil pour les <p> <h1> ... leur mettre un padding et margin à 0 (sinon ils en appliquent un par défaut)

une fois cela fait commence à jouer avec les marges afin d'obtenir l'effet souhaité



cela dit ne te fait pas trop d'illusions : tous les navigateurs ne donneront pas exactement le même rendu au poil près

scott54 a écrit :
dans un premier temps vérifie que les navigateurs ne fonctionnent pas en mode natif (pour cela il faut vérifier que tu as bien le bon doctype dans le head de la page avec le lien )

+1. Voir par exemple les squelettes de pages (X)HTML générés par http://css.alsacreations.com/outils/squelettor/index.php

scott54 a écrit :
ensuite vire tous les margin / padding
met les tous à 0 (même ceux de body afin qu'il n'y ai pas d'héritage)

Bah faut voir, c'est pas forcément une bonne idée. Les reset CSS un peu bourrin (voire ceux un peu plus subtils), c'est pas toujours une bonne chose. Et, pour information, les propriétés CSS margin et padding ne s'héritent pas.

scott54 a écrit :
pareil pour les <p> <h1> ... leur mettre un padding et margin à 0 (sinon ils en appliquent un par défaut)

Là encore, en quoi serait-ce un problème? Ça peut jouer pour la fusion des marges, mais vu qu'ici les blocs ont une bordure il n'y a pas de fusion des marges entre enfants et parents qui entre en ligne de compte.

scott54 a écrit :
cela dit ne te fait pas trop d'illusions : tous les navigateurs ne donneront pas exactement le même rendu au poil près

+1 aussi. Pour le problème soulevé je pense qu'il doit y avoir une explication, qui peut tenir à:
- une page en mode Quirks;
- une fusion de marges inférieures et supérieures sur les deux blocs, qui aurait lieu dans un cas (Firefox, Opera) et pas dans l'autre (Safari, Chrome), par exemple à cause d'un contexte de formatage.

La première explication me semble plausible. J'ai plus de doutes sur la seconde. Et, dans tous les cas, il sera difficile d'en dire plus sans avoir accès à la page elle-même.

Bonjour,

Ouais mon code XHTML est niquel je parle pas vraiment de ça (XHTML Strict), mais quand on voit les deux images on voit quand même qu'il y a un malaise.

Je pense que je vais bricoler un truc avec les bordures et mettre par exemple une image entre deux blocs pour que ce soit parfait car les navigateurs interprêtent différement les margin etc. J'ai d'ailleurs été assez déçu par Chromium quand j'ai vu qu'il me faisait le problème .

Merci en tout cas pour vos réponses.

Cordialement,

TULLE.

scott54 a écrit :
le but de css étant de séparer les informations de leur mise en forme utiliser un <br> pour de la mise en forme n'est peut être pas judicieux

en ce qui concerne ton problème j'avoue ne pas bien saisir la différence entre tes deux images

Pour cette même raison, l'utilisation d'une image est déconseillée...