Css : bug sous ie7

[ivoyages]

Bonjour,

Je suis entrain de refaire la maquette de mon site. Et je coince sur un point.

Je suis dans la phase d'essai et je constate un bug dans mon header sous ie 7 (ie 6 non testé ? Pas de bug constaté sous les autres navigateurs) entre mon logo et mon bandeau pub. Le bandeau vient se placer sous le logo au lieu d'être à sa droite.

Voici mes bouts de code

Template :

Code: Tout sélectionner

<!-- header -->
    <div id="header" align="left">
    <div id="header_col1">
   <a href="http://www.i-trekkings.net" target="_blank"><img src="http://www.i-trekkings.net/templates/temp/img/logo.gif" border="0" /></a>
   </div>
   <div id="header_col2">
<!--/* OpenX Tag Javascript v2.6.5 */-->
<script type='text/javascript'><!--//<![CDATA[
   var m3_u = (location.protocol=='https:'?'https://www.i-trekkings.net/Bando/www/delivery/ajs.php':'http://www.i-trekkings.net/Bando/www/delivery/ajs.php');
   var m3_r = Math.floor(Math.random()*99999999999);
   if (!document.MAX_used) document.MAX_used = ',';
   document.write ("<scr"+"ipt type='text/javascript' src='"+m3_u);
   document.write ("?zoneid=1&amp;target=_blank&amp;blockcampaign=1");
   document.write ('&amp;cb=' + m3_r);
   if (document.MAX_used != ',') document.write ("&amp;exclude=" + document.MAX_used);
   document.write (document.charset ? '&amp;charset='+document.charset : (document.characterSet ? '&amp;charset='+document.characterSet : ''));
   document.write ("&amp;loc=" + escape(window.location));
   if (document.referrer) document.write ("&amp;referer=" + escape(document.referrer));
   if (document.context) document.write ("&context=" + escape(document.context));
   if (document.mmm_fo) document.write ("&amp;mmm_fo=1");
   document.write ("'><\/scr"+"ipt>");
//]]>--></script><noscript><a href='http://www.i-trekkings.net/Bando/www/delivery/ck.php?n=ad81383f&amp;cb=INSERT_RANDOM_NUMBER_HERE' target='_blank'><img src='http://www.i-trekkings.net/Bando/www/delivery/avw.php?zoneid=1&amp;n=ad81383f' border='0'/></a></noscript>
    </div>
   </div>

Css :

Code: Tout sélectionner

#header div {
width:995px;
background-color:#fff;
color:#ff9933;
display: table-cell;
vertical-align:middle;
text-align:center;
}

#header_col1 {
}

#header_col2 {
padding:0px 4px 0px 0px;
}

Si vous avez des idées pour corriger ce problème d'affichage, je suis preneur

a voir ici *http://www.i-trekkings.net/index_new.php

Greg

[spout]

Je dirais que c'est un problème de valeurs par défaut des padding/margin.
Essaye en les définissant:

Code: Tout sélectionner

#header div{padding:0;margin:0;}


[ivoyages]

Spout : non ça ne change rien.

J'ai essayé aussi de modifier les valeurs de margin et de padding à #header_col2 mais rien n'y fait...

[Blount]

Sur tes div header_col1 et header_col2, tu as une largeur de 995px.
Ceci expliquerai pourquoi ça revient à la ligne.

[spout]

Et ceci:
#header_col1 en float:left
#header_col2 en float:right

Sans oublier un <div> ou <br /> clear:both; après le #header_col2

Edit: @Blount bien vu

[ivoyages]

J'avais essayé avec ça mais ça ne marchae pas.

Code: Tout sélectionner

#header_col1 {
   width: 255px;
}

#header_col2 {
   width: 728px;
}

En fait je viens d'apprendre que ie7 et les versions en dessous ne prennent pas en charge display: table-cell;
Faut que je creuse le sujet...

[Blount]

Ah oui, je n'avais pas remarqué le display.
Effectivement, ce display ne fonctionne pas sous IE6/7 (8?).

C'est pourtant bien pratique pour avoir deux colonnes avec une même hauteur, peu importe le contenu.

Il faut que tu utilises "display: block;" avec un float left et right.
Il faut veiller à ce que les deux colonnes n'aient pas une largeur total supérieur à celle du parent, sinon tu auras un retour à la ligne (attention à compter le padding et les bordures dans le calcule).
Exemple : pour avoir une largeur de 300px avec un padding gauche et droite de 15px, il faut mettre la largeur à 270px.

[ivoyages]

J'ai essayé avec ces bouts de code :

Appel de la feuille de style (dans head) :

Code: Tout sélectionner

<!--[if lt IE 8]>
   <link type="text/css" rel="stylesheet" href="http://www.i-trekkings.net/templates/temp/special_skin_ie.css" />
<![endif]-->

css spécial ie :

Code: Tout sélectionner

#header div {
display:block;
width:995px;
background-color:#fff;
color:#ff9933;
vertical-align:middle;
}

#header_col1 {
float:left;
width:254px;
}

#header_col2 {
float:right;
width:728px;
padding:0px 4px 0px 0px;
}

Mais même souci. J'ai oublié un truc ?

Greg

[spout]

1) Essaye sans définir de largeur pour #header_col2.
2) Tu n'as pas besoin de chippoter avec des CSS conditionnels pour ça.

[ivoyages]

1) Essaye sans définir de largeur pour #header_col2.

ça ne change rien

2) Tu n'as pas besoin de chippoter avec des CSS conditionnels pour ça.

Pas sur d'avoir compris. J'ai exclu ie8 car display:table-celle fonctionne avec

[spout]

Tu n'as pas besoin du display:table-cell

Petit exemple tout simple:

Code: Tout sélectionner

.floatl{float:left;}
.floatr{float:right;}
.clear{clear:both;}

#gauche{width:200px}


Code: Tout sélectionner

<div>
<div class="floatl" id="gauche">Gauche</div>
<div class="floatr">Droite</div>
<br class="clear" />
</div>


Ça fonctionne aussi avec 2 fois float left:

Code: Tout sélectionner

<div>
<div class="floatl" id="gauche">Gauche</div>
<div class="floatl">Droite</div>
<br class="clear" />
</div>


[ivoyages]

J'ai réglé mon problème différemment en créant un tableau dans ma feuille de style.

css de base :

Code: Tout sélectionner

#header div.td {
background-color:#fff;
color:#ff9933;
display: table-cell;
vertical-align:middle;
}

css spécial ie :

Code: Tout sélectionner

div.td {
    display:inline;
    zoom : 1;
      }

Appel du fichier css ie :

Code: Tout sélectionner

<!--[if lt IE 8]>
   <link type="text/css" rel="stylesheet" href="http://www.i-trekkings.net/templates/temp/special_skin_ie.css" />
<![endif]-->

Merci pour votre aide

Greg

[spout]

en créant un tableau

Ça valait vraiment la peine qu'on essaye de t'aider pour qu'au final tu utilises une table
On ne le dira jamais assez: les tables c'est pour les données tabulaires.

[ivoyages]

Je sais mai ça fait 3 heures que je suis dessus sans y arriver et j'en avais marre

[CARREZ]

Ben c'est pas une table juste une simulation en css ... Les td sont des classes pas des balises html.

Par contre sauf erreur "table-cell" n'est pas compatible avec ie6.

Et il n'y a vraiment rien de compliqué dans ce header, c'est surement juste la div avec une classe vide qui pose problème sur IE7 :
<div align="left" id="header">
<div class="">
<div class="td">

Elle ne sert à rien. Ensuite il suffit que les deux div.td soient flottantes avec un padding-top pour la seconde pour obtenir le même résultat...