pbm css entre internet explorer et firefox

[bunker]

bonjour, ce post fait suite à ce fil de discussion :

http://www.webrankinfo.com/forums/viewtopic_67553.htm

vous pouvez vous rendre compte des problèmes sur mon site :

http://www.laboiteasite.com


J'ai 2 problèmes liés à ma feuille de style

1°)
background: #FFC600; donne un fond orange sous IE
background: #FFC600; donne un fond transparent sous Firefox (1.0)
background: #FFFFFF; donne un fond blanc sous firefox

j'ai essayé en minuscule, avec background-color à la place de background,
rien n'y fait....

2°)
le positionnement par float ne fonctionne apparement pas sous firefox (bug connu)

Dans les blocs Annuaire & Communauté, la partie droite s'affiche en dessous de la partie gauche

le code html :

Code: Tout sélectionner

<div class="left_side">
texte gauche
</div>
<div class="right_side">
texte droit
</div>

le code css :

Code: Tout sélectionner

.left_side {
  float: left;
  width: 50%;
  padding: 0 0 0 10px;
  margin: 10px 0;
  background: #FFF;
  clear: both;
}

.right_side {
  float: right;
  width: 50%;
  background: #FFF url(images/dotted.gif) repeat-y;
  padding: 0 0 0 40px;
  margin: 10px 0;
  clear: both;
}

j'ai essayé de mettre les 2 divs dans un conteneur afin d'utiliser overflow:

Code: Tout sélectionner

.conteneur {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  overflow: hidden;
}

mais ça ne fonctionne toujours pas...

je ne veux pas utiliser de table, seulement du css...

je suis ouvert à toutes solutions, j'ai effectué plusieurs recherches sur plusieurs sites et forums, aucune solution ne fonctionne...

merci d'avance à tous ceux qui se pencheront sur mon problème!

[Seraph]

Passe le width de right_side et left_side a 49% pour voir...

[bunker]

merci seraph, ça aurait été trop simple déjà fait, même problème...

[ptit_mousse]

Salut,

Perso je préferre toujours utiliser les fonctions spécifiques (padding-left....) que les groupes(padding). A priori ton décalage vient d'ailleurs du padding qui décale l'ensemble du premier bloc de 10px et le deuxième de 40px ce qui fait que tes 2 bloc font ensemble 50% + 50% + 10px + 40px soit plus que ne peut contenir une ligne.
Je te conseillerai donc de mettre tes width en px et non en %

[Patrice A.]

clear:both ça ne veut pas justement dire "on oublie tous les float au dessus, et on va à la ligne" ? -> la partie droite se place donc SOUS tous les autres float...

[bunker]

merci ptit-mousse, effectivement, les 2 blocs depassaient la taille maximale mais ce n'était pas suffisant...

pour que ce la fonctionne, j'ai du modifier ma feuille de style :

j'ai supprimé le float pour le bloc gauche :

Code: Tout sélectionner


.conteneur {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  overflow: hidden;
}

.right_side {
  float: right;
  padding: 0 0 0 40px;
  margin: 10px 0;
  width: 40%;
  background: #FFF url(images/dotted.gif) repeat-y;
  color: #414141;
  clear: both;
}

.left_side {
  padding: 0 0 0 40px;
  margin: 10px 0;
  width: 40%;
  background: #FFFFFF;
  color: #414141;
}


puis modifié mon code html afin d'afficher d'abord le bloc droit :

Code: Tout sélectionner

<div class="conteneur">
<div class="right_side">
texte droit
</div>
<div class="left_side">
texte gauche
</div>
</div>


cela s'affiche correctement sous IE7, firefox 2.0 et opera 9.10

merci à tous!

malheureusement, mes problèmes ne s'arrêtent pas là, sous firefox et opera, j'ai un problème de background-color...

still searching!

[bunker]

effecitvement Dj_Apx, c'est ce que je m'étais dit, mais non, même en supprimant le clear: both à droite (ou à gauche ou les deux d'ailleurs), j'avais le même problème...

[fra_arf]

Premièrement arrête d'utiliser des margin et contente toi d'utiliser uniquement que des padding car il y a bcp trop de bug quand tu utilises des margin left et right...

Ensuite tu crés un site pour créer des sites mais tu sais pas les crées tout seul...

C'est hs mais ça me fait grandement sourir quand même

[bunker]

j'avais un problème de background-color sous firefox:

Dans le cas d'un div qui englobe d'autres div, sous IE, pas de problème mais sous firefox, le fond reste transparent.

Exemple :

pour le html :

Code: Tout sélectionner

<body>
<div id="content">
   <div id="left">
   texte gauche
   </div>
   <div id="right">
   texte droit
   texte droit
   texte droit
   texte droit
   </div>
</div>
</body>


pour le css :

Code: Tout sélectionner

#body{
background-color: #000000;
}

#content {
background-color: #FFFFFF;
}

#left {
display: block;
float: left;
clear: both;
background-color: #FFFFFF;
}

#right {
display: block;
float: right;
background-color: #FFFFFF;
}


le div content n'aura pas le fond blanc mais noir, cela se vera car le div left est plus court que le div right, pour que le fond soit blanc, il faut rajouter overflow:

Code: Tout sélectionner

#content{
background-color: #FFFFFF;
overflow: auto;
}


et voila!

merci à tous ceux qui m'ont donné des infos...