Bug sur ie - div en absolue dans une div en float

Bug sur ie - div en absolue dans une div en float - HTML/CSS - Programmation

Marsh Posté le 02-01-2007 à 17:26:56    

Petit soucis sous ie, quand je met un div en position absolute et qui déborde de la div, dans un div en float, le div suivant en float cache le div en absolute ...
 
En faite le résultat voulu est celui de firefox, pour ie ...
 
Merci pour vos réponses .....
 
 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"  
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
.flodiv1 {
   position:relative;
   float: left;
   width: 150px;
   height: 200px;
   border: 1px dashed #009900;
   background-color: #ccffcc;
   text-align: center;
   
   margin-left:20px;
}
.absdiv2 {
   position: absolute;
   z-index:2;
   width: 150px;
   height: 100px;
   
   margin-left:20px;
   
   border: 1px dashed #990000;
   background-color: #ffdddd;
}
</style>
</head>
<body>
<div class="flodiv1">
    <br /><span class="bold">DIV #2</span>
    <br />float: left;
 
    <div class="absdiv2">
        <br /><span class="bold">DIV #5</span>
        <br />position: absolute;
    </div>
</div>
 
<div class="flodiv1">
    <br /><span class="bold">DIV #2</span>
    <br />float: left;
 
    <div class="absdiv2">
        <br /><span class="bold">DIV #5</span>
        <br />position: absolute;
    </div>
</div>
</body>
</html>

Reply

Marsh Posté le 02-01-2007 à 17:26:56   

Reply

Marsh Posté le 03-01-2007 à 13:39:58    

Sur Firefox aussi l'absolute est "cachée" sous la deuxième flottante, simplement que les absolutes ne se trouvent pas au même endroit sur les deux navigateurs (sur FF elle commence à la ligne et fort proche du bord de la float de gauche, sur IE elle commence directement à droite du texte de la float de gauche).
 
Essaye , dans .absdiv2, de remplacer le margin-left par 40px et tu verras :)
 
Je pense que c'est inhérant à une div en float de se situer au-dessus d'une absolute. Tu vas devoir donc changer tes div roses en relative et trouver une autre solution :)

Reply

Marsh Posté le 03-01-2007 à 17:08:40    

Merci, mais en faite j'ai joué avec les z-index, et ca marche nikel ....

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed