[ Résolu ] Problème de positionnement FF - IE

Salut,

Ca doit bien faire deux soirée que je suis penché sur ce problême de positionnement, j'éspère que vous allez pouvoir m'aider !
Le problême est que j'arrive au résultat voulu, mais jamais sous IE et FireFox en même temps !
Je vais vous expliquer mon problême en image ce sera beaucoup plus simple :

Je veux arriver à cela :


Le code html tout d'abord...

<div class="header">

<div class="banniere_468_60"></div>

<div class="header_situation">
<div class="bleu_t11">

<a href="?page=accueil" class="rouge_t11">Accueil</a> 
<? 
if ($nbrt == "1") echo" > <a href='?page=$page' class='rouge_t11'>$tr2</a>";
if ($nbrt == "2") echo" > <a href='?page=$page_precedente' class='rouge_t11'>$tr2</a> > <a href='?page=$page' class='rouge_t11'>$tr3</a>"; 
?>

</div>
</div>

<div class="header_langue">
<img src="image_index/drapeau_fr_ombre.jpg" class="drapeau_40_25" alt="Français" />
<img src="image_index/drapeau_all_ombre.jpg" class="drapeau_40_25" alt="Allemand" />
<img src="image_index/drapeau_ang_ombre.jpg" class="drapeau_40_25" alt="Anglais" />
</div>

<div class="titre_general"><h1>[ <? echo"$titre"; ?> ]</h1></div>

</div>

J'y arrive en utilisant le code suivant :
Sous IE :

// Le cadre
.header { MARGIN:auto; WIDTH:750px; HEIGHT:320px; BACKGROUND-IMAGE:URL("image_index/template_haut.jpg"); }
// Les sous parties, dans l'ordre chronologique
.banniere_468_60 { MARGIN-TOP:80px; MARGIN-LEFT:262px; WIDTH:468px; HEIGHT:60px; BACKGROUND-COLOR:#000000; }
.header_situation { MARGIN-TOP:97px; MARGIN-LEFT:210px; WIDTH:400px; HEIGHT:16px; TEXT-ALIGN:left; }
.header_langue { MARGIN-LEFT:170px; WIDTH:500px; HEIGHT:25px; TEXT-ALIGN:right; }
.titre_general { MARGIN-LEFT:194px; WIDTH:510px; HEIGHT:35px; BORDER-BOTTOM:dashed #0066FF 1px; }

Sous FF :

// Le cadre
.header { MARGIN:auto; WIDTH:750px; HEIGHT:320px; BACKGROUND-IMAGE:URL("image_index/template_haut.jpg"); }
// Les sous parties, dans l'ordre chronologique
.banniere_468_60 { FLOAT:left; MARGIN-TOP:80px; MARGIN-LEFT:262px; WIDTH:468px; HEIGHT:60px; BACKGROUND-COLOR:#000000; }
.header_situation { FLOAT:left; MARGIN-TOP:97px; MARGIN-LEFT:210px; WIDTH:400px; HEIGHT:16px; TEXT-ALIGN:left; }
.header_langue { FLOAT:left; MARGIN-LEFT:170px; WIDTH:500px; HEIGHT:25px; TEXT-ALIGN:right; }
.titre_general { FLOAT:left; MARGIN-LEFT:194px; WIDTH:510px; HEIGHT:35px; BORDER-BOTTOM:dashed #0066FF 1px; }

Notez les float:left; que je suis obligé de mettre...

Bref, l'affichage n'est pas correct, si je ne met pas le code IE correct, j'ai l'image suivante sous FF :

Le problême est que le premier div se place au-dessu de son parent, il faudrait juste arriver à le décaler vers le bas, et tout suivrait...

Et si je ne met pas le code correct pour FF, j'ai le bug suivante sous IE :

Voila c'est comme si il y avait des margin non déclaré ou je ne sais quoi.


Si il vous faut autre chose qui puisse vous aider, n'hésitez pas, merci beaucoup à vous !

Vincent
Modifié par Vinz (02 Apr 2005 - 18:54)

J'ai trouvé la solution, avec une chance pas croyable, je ne la cherchais même pas.

Pour résumer, quand il y a un float, la propriété display disparait, il faut donc la rajouté au code bon pour FireFox :

DISPLAY:inline;

Sur chaque ligne.

Voila pour plus d'informations :
http://www.positioniseverything.net/explorer/doubled-margin.html

Vincent