Discussion :

[Bisûnûrs]

Hello,

Je bloque sur un problème d'affichage sur IE6, je suppose que c'est une connerie, mais vu que j'ai la tête explosée par le travail en ce moment je n'arrive pas à mettre la main sur la solution.

Le code suivant :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
#content{
   height:120px;
   position:relative;
   width:900px;
}
#float1{
   background:red;
   height:120px;
   width:450px;
   float:left;
}
#float2{
   background:blue;
   height:120px;
   width:450px;
   float:left;
}
#absolu{
   width:900px;
   height:24px;
   left:0;
   top:85px;
   background:green;
   position:absolute;
}

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
<div id="content">
   <div id="float1"></div>
   <div id="float2"></div>
   <div id="absolu"></div>
</div>

est censé faire apparaître une barre verte (absolu) au-dessus de deux autres éléments flottants (float1 et float2).

Aucun problème pour Firefox, cependant IE6 refuse de l'afficher.

Je me dis qu'elle est sans doute cachée par les deux éléments flottants, alors je vire les couleurs d'arrière plan, et toujours aucune barre verte ..

Mais où est passée la barre verte ? (Charlie si tu m'entends ..)

Une idée pour corriger ce bug ?

[E.Bzz]

Bonjour,

Une idée pour corriger ce bug ?

spécifier les z-index, pour être sûr de l'ordre d'empilement ?
(supprimer la couleur de fond ne le rend pas transparent)

A+

[Bisûnûrs]

spécifier les z-index, pour être sûr de l'ordre d'empilement ?

Déjà essayé et rien n'y fait .. :/

supprimer la couleur de fond ne le rend pas transparent

Pourtant, lorsque je rajoute

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
body{
   background:yellow;
}

et que je supprime la couleur de fond des flottants, on voit bien le jaune ..

Après, est-ce le jaune du body ou le jaune des flottants qui ont hérité de la couleur du body étant donné qu'ils n'ont pas de couleur de fond définie ?

[E.Bzz]

Après, est-ce le jaune du body ou le jaune des flottants qui ont hérité de la couleur du body étant donné qu'ils n'ont pas de couleur de fond définie ?

Je pense, car si j'enlève juste la couleur d'un float, on ne voit rien ... alors que l'absolute est bien là (puisqu'on l'y a mis )

Après moultes essais, j'en arrive à une conclusion : c'est très énervant

[Candygirl]

Visiblement c'est un bug dépendant du bug des 3px lorsque les flottants occupent le 100% de l'espace du conteneur. C'est aussi dans ces conditions-là que le bug du texte dupliqué peut arriver.

Je te propose 2 options:

- placer ton conteneur en float mais sans lui attribuer de width, vu qu'il constituera sa largeur d'après son contenu il prendra 900px sans avoir à les spécifier directement

- ajouter un margin-right de -3px sur ton #float2

[Strix]

Bien le... bonsoir !

J'ai trouvé ! j'ai trouvé !

Rajoute clear:both (ou clear:left) à #absolu et là...

Apparition ! Et tu peux mettre un fond jaune à ton body...

D'ailleurs, question couleurs, faudrait qu'on est une discussion

[Bisûnûrs]

C'est aussi dans ces conditions-là que le bug du texte dupliqué peut arriver.

Ca m'est souvent arrivé ça aussi, et je ne sais toujours pas par quel miracle la duplication de texte peut se faire.

placer ton conteneur en float mais sans lui attribuer de width, vu qu'il constituera sa largeur d'après son contenu il prendra 900px sans avoir à les spécifier directement

Je ne pouvais pas vraiment adopter cette solution que j'avais déjà envisagée, étant donné que je mets un margin:0 auto sur le conteneur.

ajouter un margin-right de -3px sur ton #float2

En effet c'est une solution qui fonctionne, mais je vais préférer celle de Strix.

Rajoute clear:both (ou clear:left) à #absolu et là...

Apparition ! Et tu peux mettre un fond jaune à ton body...

Là, je dis chapeau ! Et je te remercie grandement !

D'ailleurs, question couleurs, faudrait qu'on est une discussion

Désolé, les développeurs web ont en général très mauvais goût, c'est pour ça qu'il existe des webdesigners comme toi.