[résolu] Float left avec images sous ie7 ?

Bonjour,

Je voudrais faire un bandeau d'en-tête partagé en 5 morceaux :
une image fixe, un flash, 2 images fixes, puis une image qui se répète pour s'ajuster à la largeur de la page.

Tout marche bien sous firefox mais sous IE... problème (comme d'hab ) : les 2 images situés après le flash ne s'affiche pas !

Sous firefox, j'obtiens ça, comme prévu : http://loic.vauvrecy.free.fr/firefox.jpg
Sous IE7 : http://loic.vauvrecy.free.fr/ie.jpg
(oui je sais, c'est moche pour l'instant... mais c'est temporaire).

Voici le code html qui nous intéresse :

<div id="header">
<div id="part1"/>
<div id="part2">
<object id="poisson_juillet_3" height="150" width="200" align="middle" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000">
<param value="sameDomain" name="allowScriptAccess"/>
<param value="/drupal-5.7/sites/all/themes/zen/photofish/images/poisson_juillet_3.swf" name="movie"/>
<param value="high" name="quality"/>
<param value="#999999" name="bgcolor"/>
<embed height="150" width="200" align="middle" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" allowscriptaccess="sameDomain" name="poisson_juillet_3" bgcolor="#999999" quality="high" src="/drupal-5.7/sites/all/themes/zen/photofish/images/poisson_juillet_3.swf"/>
</object>
</div>
<div id="part3"/>
<div id="part4"/>
<div id="part5"/>
</div>

Et le css associé :

#header {
margin : 0;
padding : 0;
left : 0;
top :0;
width : 100%;
height : 150px;
}  

#part1 {
border : none;
margin : 0;
padding :0;
  float : left;
  clear : left;
  background : url(../photofish/images/gauche_fish_01.jpg) no-repeat;
  width : 30px;
  height: 150px;
  z-index: 2;
  }

#part2 {
  float : left;
border : none;
margin : 0;
padding :0;
  /*background : url(../photofish/images/master_loic_02.jpg)no-repeat;*/
  width : 200px;
  height: 150px;
    z-index: 2;
  }
#part3 {
  float : left;
border : none;
margin : 0;
padding :0;
  background : url(../photofish/images/fixedroit_03.jpg)no-repeat;
  width : 200px;
  height: 150px;
    z-index: 2;
  }
#part4 {
border : none;
margin : 0;
padding :0;
  float : left;
  background : url(../photofish/images/degrade_04.jpg)no-repeat;
  width : 70px;
  height: 150px;
    z-index: 2;
  }
#part5 {
border : none;
margin : 0;
padding :0;
  left : 500px;
  background : url(../photofish/images/gauche_fish_01.jpg) repeat-x;
  height: 150px;
    z-index: 0;
  }

Si quelqu'un a une idée (lumineuse ).... perso je bloque
Modifié par Sunshine_ (04 Aug 2008 - 13:39)

Question : Depuis quand c'est valide une balise <div /> écrite comme un <br /> ?
Peut-être que ça vient simplement de ça ?

Non, j'ai copié le code html depuis l'extension firebug de firefox, pour éviter le php présent sur ma page (inutile ici).
Sur la page php, il y a la bonne syntaxe de div.

C'est firebug qui change les <div></div> en <div /> lorsque la div ne contient rien en html.
Modifié par Sunshine_ (15 Jul 2008 - 17:12)

Essai de mettre une bordure sur tes div pour voir si elles prennent bien toute la hauteur de ton bandeau.

Si ce n'est pas le cas, essais d'appliquer un overflow:hidden sur tes div et sur ton header.

Et dans ton cas je ne suis pas sûr que le z-index soit utile car tu ne positionnes pas tes divs avec position:

A priori, les div prennent bien toute la hauteur du bandeau.
J'ai essayé l'overflow:hidden, mais sans succès.

Effectivement, je suppose que le z-index ne sert à rien ici. Mais dans le doute, je l'avais mis pour etre sur que ça vient pas de là...

hello,
as tu essayé de mettre ton div part 5 egalement en float:left, avec une width définie en px ?

(je répond un peu tard, désolé... j'étais en vacances )

L'intérêt de ma div 5, c'est justement de se repeat autant de fois que nécessaire pour s'adapter à la résolution de l'écran.
Donc la mettre en taille fixe n'aurait aucun intérêt ici.

Si je ne définis aucune taille fixe mais que je la mets en

float:left

, la div5 ne se repeat pas.
Modifié par Sunshine_ (03 Aug 2008 - 17:36)

Bonjour,

Avec une page en ligne pour visualiser le problème, ce serait tout de même dix fois plus simple...

roooo j'y crois pas...

Dans les div part3 et part4, j'avais oublié l'espace

background : url(../photofish/images/fixedroit_03.jpg)no-repeat;

entre la fin de parenthèse et le no-repeat.
Ca ne gênait pas firefox, mais IE n'aime pas du tout...

J'ai remis l'espace, problème résolu, merci
Modifié par Sunshine_ (04 Aug 2008 - 13:38)