[resolu] Image ,marge & IE !

Bonjour et bonne année a tous !

Il me semblait avoir lu la reponse sur ce forum, mais apres quelques recherches, j'ai rien trouvé ... donc je m'excuse par avance si c'est un sujet qui a dejà été abordé
le probleme vient de ... IE ( ) pour qui 800px+180px = 983px !!!
je m'explique :
un div conteneur de 980px, contient un div en float left de 180 px, une balise h1 et une image de 800px; sous Firefox no problemo, sous IE
a) l'image se barre sous la div en float left,
b) il y a une marge entre le div float left et H1
si je mets le conteneur a 983px, avec IE l'image est enfin positionnée et avec la meme marge que pour h1... , sous FF c'est un decalage pas tres esthetique qui se produit entre H1 et l'image

<div id="bloc">
  <div id="menuG">
    <img src="images/montbrun_haut.jpg" alt="montbrun les bains" width="180" height="270" style="margin:0;"/>
    <ul>
      <li> ...</li>
      <li> ...</li>
...
    </ul>
	<img src="images/montbrun_bas.jpg" alt="montbrun les bains" />
  </div>
  <h1 id="haut" style="clear:none;">Office de Tourisme de Montbrun les Bains</h1>
  <div style="clear:none;"><img src="images/fond_lavandeH.jpg" id="menuH" width="800" height="100" /></div>
</div>

la CSS

*	{margin:0;padding:0;}
#bloc {	width:980px;}
#menuH {border: none;}
#menuG {font-size: 1em;	font-style: normal; width:180px;float:left;	margin-right:0;}
#haut	{font-family:Tahoma, Verdana, Arial, sans-serif; font-size:0.8em;	line-height:0.9em;color: #CCCCCC; font-variant:normal; letter-spacing:0.60em;text-align:center; background-image:url(images/fond_menuH.jpg); background-repeat:repeat; 
height:23px; margin:0px ; font-weight:normal; }

j'ai mis toutes les marges à 0 , mis des "clear:none", essayé de fainter avec des bordures ,des "margin-right" mais rien n'y fait

l'apercu est ici :
?http://www.montbrunlesbainsofficedutourisme.fr/test4.html

comment faire pour que l'image #menuH reste en haut sous IE , sans marge, ou a defaut rendre homogene le rendu sous IE et FF ...
Merci
Modifié par lovetronic (10 Jan 2007 - 18:05)

Salut!

Je n'ai pas regardé en détails ton code, mais l'addition de "flottant", "3 pixels" et "IE" allume dans ma cervelle la petite lumière "three pixel jog", i.e. un bug connu d'IE.

Une petite recherche à ce sujet dans le forum devrait te mener à la solution. Et ces liens aussi :

http://www.positioniseverything.net/explorer/threepxtest.html (en)
http://www.test.blog-and-blues.org/haslayout/tests/float6.html

A mon humble avis, cette question devrait mériter l'oscar du sujet le plus souvent posté sur le forum

M'enfin.... Il me semblait bien que j'avais déjà lu ça ici

et Merci Sopo, j'ai trouvé 2 solutions, la premiere qui me satisfaisait pas vraiment , d'autant plus qu'IE7 n'aurait plus ce bug

<!--[if IE]>
<style type="text/css">
#menuG {margin-left:-3px;}
</style>
<! endif -->

la seconde que j'ai adapté a la situation , et big merci a Lanza (Voir le thread) avec un div qui va contenir les elements du flux fixé avec la propriété "display:inline;"

<div id="bloc"> /*en float:left;*/
  <div id="menuG"> <img src="images/montbrun_haut.jpg" alt="montbrun les bains" width="180" height="270" style="margin:0;"/>
    <ul>
      .../...
    </ul>
    <img src="images/montbrun_bas.jpg" alt="montbrun les bains" /></div>
  <div id="principal" style="width:800px; display:inline;">
    <h1 id="haut">Office de Tourisme de Montbrun les Bains</h1>
    <img src="images/fond_lavandeH.jpg" id="menuH" /></div>

++

lovetronic a écrit :
et Merci Sopo, j'ai trouvé 2 solutions, la premiere qui me satisfaisait pas vraiment , d'autant plus qu'IE7 n'aurait plus ce bug

Alors il te suffit d'appliquer le commentaire conditionnel à toutes les versions inférieures à IE7 et non pas "tout IE" comme tu l'as fait.

En tout cas, c'est cette méthode et solution qui sera certainement la plus facile à mettre en oeuvre et la plus pérenne.
Modifié par Raphael (10 Jan 2007 - 18:12)