Css : bug sous ie7

WRInaute discret
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:
<!-- 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:
#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
 
WRInaute accro
Je dirais que c'est un problème de valeurs par défaut des padding/margin.
Essaye en les définissant:
Code:
#header div{padding:0;margin:0;}
 
WRInaute discret
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...
 
WRInaute impliqué
Sur tes div header_col1 et header_col2, tu as une largeur de 995px.
Ceci expliquerai pourquoi ça revient à la ligne.
 
WRInaute accro
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 :)
 
WRInaute discret
J'avais essayé avec ça mais ça ne marchae pas.

Code:
#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...
 
WRInaute impliqué
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.
 
WRInaute discret
J'ai essayé avec ces bouts de code :

Appel de la feuille de style (dans head) :

Code:
<!--[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:
#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
 
WRInaute accro
1) Essaye sans définir de largeur pour #header_col2.
2) Tu n'as pas besoin de chippoter avec des CSS conditionnels pour ça.
 
WRInaute accro
Tu n'as pas besoin du display:table-cell

Petit exemple tout simple:
Code:
.floatl{float:left;}
.floatr{float:right;}
.clear{clear:both;}

#gauche{width:200px}

Code:
<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:
<div>
<div class="floatl" id="gauche">Gauche</div>
<div class="floatl">Droite</div>
<br class="clear" />
</div>
 
WRInaute discret
J'ai réglé mon problème différemment en créant un tableau dans ma feuille de style.

css de base :

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

css spécial ie :
Code:
div.td { 
    display:inline; 
    zoom : 1;
      }

Appel du fichier css ie :

Code:
<!--[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
 
WRInaute discret
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...
 
Discussions similaires
Haut