[CSS]Probleme de mise en forme sous IE6

Bonjour,

Comme l'indique le sujet de mon topic, j'ai un soucis au niveau de la mise en forme sous Internet Explorer version 6 alors que sur Mozilla Firefox ce problème n'est pas apparant

Plus que des paroles, il vaut mieux des exemples concrets, voici la page ou j'ai ce problème :

http://www.fuzion.tonsite.biz/evol/

En cliquant sur le lien ci-dessus avec Firefox puis IE6 vous verrez pour ce dernier que les 2 cadres de couleurs turquoise (cituer en dessous de la barre de navigation, nommer FLASH NEWS) et l'autre de couleur orange est carrémment décalé vers la droite sans que je ne comprenne d'où vient le problème. Je sais qu'il y a certaines imcompatibilités au niveau CSS avec les 2 navigateurs. Mais vu mon niveau en CSS, j'aurais du mal à trouver une solutions.

/***********
*  cadres-left *
************/

/* cadres-left */
#cadres-left {
text-align:left;
margin-top: 0px;
margin-left: 0px;
}

#cadres-left_post_background{
position : absolute;
background: url(http://www.upset-crew.com/images/cadres-left.jpg) no-repeat;
margin-top: 30px;
width:225px;
height:220px;
}

/***********
*  cadres-right *
************/

/* cadres-right */
#cadres-right { 
text-align:left;
margin-left: 8px;
margin-right:20px;
font-size:11px;
}

#cadres-right_post_background{
position : absolute;
background: url(http://www.upset-crew.com/images/cadres-right.jpg) no-repeat;
margin-top: 30px;
margin-left:220px;
width:225px;
height:220px;
}

En vous remerciant d'avance pour l'aide que vous m'apporterez

Cordialement.
Modifié par Moonky (04 Dec 2006 - 12:06)

Salut,

Utilises plutot les float pour positionner tes 2 blocks.

et ton code n'est pas top non plus, utilise plutot un truc du genre :

<ul class="cadres-left">
  <li class="titre">FLASH NEWS</li>
  <li>blah...</li>
  <li>blah...</li>
  ...
</ul>
<ul class="cadres-right">
  <li class="titre">FLASH NEWS</li>
  <li>blah...</li>
  <li>blah...</li>
  ...
</ul>

et le CSS

.cadres-left, .cadres-right{float:left;width:150px;margin:0;padding:0;margin-top:30px;}
.cadres-left li, .cadres-right li{list-style-type:none;margin:0;padding:0;}
.cadres-left .titre {background: url(http://www.upset-crew.com/images/cadres-left.jpg) no-repeat;font-weight:bold;}
.cadres-right .titre {background: url(http://www.upset-crew.com/images/cadres-right.jpg) no-repeat;font-weight:bold;}

Voilà tu devrais t'en sortir avec ca

dhjapan a écrit :
Salut,

Utilises plutot les float pour positionner tes 2 blocks.

et ton code n'est pas top non plus, utilise plutot un truc du genre :

<ul class="cadres-left">
  <li class="titre">FLASH NEWS</li>
  <li>blah...</li>
  <li>blah...</li>
  ...
</ul>
<ul class="cadres-right">
  <li class="titre">FLASH NEWS</li>
  <li>blah...</li>
  <li>blah...</li>
  ...
</ul>

Je n'ai pas regardé le problème en détails, mais je pense que l'on peut quand même faire mieux qu'un élément de liste avec une classe pour marquer le titre... Imagine un peu la tête que ça a avec les CSS désactivées. Et puis les CSS permettent aussi de mettre du texte en majuscules.

On peut envisager d'utiliser des titres (<hn>) ou une liste de définitions.

C'est bien vrai ca :

<div class="cadres-left">
  <h4>Flash news</h4>
  <ul>
    <li>blah...</li>
    <li>blah...</li>
    ...
  </ul>
</div>
<div class="cadres-right">
  <h4>2nd Colonne</h4>  
  <ul>
    <li>blah...</li>
    <li>blah...</li>
    ...
  </ul>
</div>

.. et t'adapte le CSS en fonction

Merci d'avoir écrit ce que j'avais eu la flemme de faire.

Pour mettre un texte un majuscules, on peut utiliser :

h4 {text-transform: uppercase;}

ou

h4 {font-variant: small-caps;}

ce qui donne des petites majuscules qui peuvent être sympas.