Div se chevauchent dans Firefox

Question

S'il vous plaît voir le code html ci-dessous

il fonctionne très bien dans IE, mais dans Firefox il overlaps..please essayer de me donner une solution. Lorsque la position de la div à l'intérieur du td a été donné statique, il travaille properly.But j'ai besoin il absolu depuis que je dois utiliser la gauche et le haut de l'aide attributes.Any est appreciated.Thanks

<table style="height:auto; position:fixed;"> 
    <tr> 
     <td style="width:210px;padding:6px 6px 6px 6px;" class="contentBoxcontent"> 
      <div style="LEFT: 20px; WIDTH: 154px; CURSOR: move; POSITION: absolute; TOP: 0px; HEIGHT: 29px;" ><a href="#">Traffic Light</a></div> 
      <div style="LEFT: 0px; WIDTH: 161px; CURSOR: move; POSITION: absolute; TOP: 33px; HEIGHT: 110px;" ><img src="../common/Images/rollingstock.png" width="100%" height="100%" /></div> 
      <div style="LEFT: 0px;WIDTH: 198px; CURSOR: move; POSITION: absolute; TOP: 154px; HEIGHT: 66px;" ><ul><li>Traffic Light Information</li><li>Signalling Information</li><li>Euro Light</li></ul></div> 
     </td> 
     <td style="width:210px;padding:6px 6px 6px 6px;" class="contentBoxcontent"> 
      <div style="LEFT: 10px;WIDTH: 154px; CURSOR: move; POSITION: absolute; TOP: 0px; HEIGHT: 29px;"><a href="#">LED Dialight Iformation</a></div> 
      <div style="LEFT: 0px;WIDTH: 161px; CURSOR: move; POSITION: absolute; TOP: 33px; HEIGHT: 110px;"><img src="../common/Images/EN-12368_Euro.png" width="100%" height="100%" /></div> 
      <div style="LEFT: 0px;WIDTH: 198px; CURSOR: move; POSITION: absolute; TOP: 154px; HEIGHT: 66px;"><ul><li>Traffic Light Information</li><li>Signalling Information</li><li>Caltran Signals Light</li></ul></div> 
     </td> 

     <td style="width:210px;padding:6px 6px 6px 6px;" class="contentBoxcontent"> 
      <div style="LEFT: 10px;WIDTH: 154px; CURSOR: move; POSITION: absolute; TOP: 0px; HEIGHT: 29px;"><a href="#">Signalling Information</a></div> 
      <div style="LEFT: 0px;WIDTH: 161px; CURSOR: move; POSITION: absolute; TOP: 33px; HEIGHT: 110px;"><img src="../common/Images/caltransignals.png" width="100%" height="100%" /></div> 
      <div style="LEFT: 0px;WIDTH: 198px; CURSOR: move; POSITION: absolute; TOP: 154px; HEIGHT: 66px;"><ul><li>Traffic Light Information</li><li>Signalling Information Light Test Data..</li><li>LED Light</li></ul></div></td> 
    </tr> 
    </table> 

Answer 1

Mais bien sûr il se chevauche. Dans tous les navigateurs Vous êtes des éléments de positionnement absolu avec exactement les mêmes valeurs left/top, comment pourrait-il pas? (Plus vous utilisez position: fixed, qui ne fonctionne pas dans IE6, mais établira un autre parent contenant dans d'autres navigateurs.)

Comme le dit Richard, vous pouvez donner à chaque élément tdposition: relative afin que les intérieur sont positionnés absolus par rapport à la cellule. Mais si, comme il semble que, tout ce que vous voulez est trois côte à côte divs, oublier à la fois le positionnement et les tables absolu, et juste dire:

<style> 
    .contentBoxcontent { 
     float: left; 
     width: 201px; height: 205px; 
     padding: 6px; margin: 2px; 
     cursor: move; 
    } 
    .contentBoxcontent a { margin-left: 10px; height: 29px; } 
    .contentBoxcontent img { display: block; width: 161px; height: 110px; } 
</style> 


<div class="contentBoxcontent"> 
    <a href="#">Traffic light</a> 
    <img src="../common/Images/rollingstock.png" alt="" /> 
    <ul> 
     <li>Traffic light information</li> 
     <li>Signalling information</li> 
     <li>Euro light</li> 
    </ul> 
</div> 

<div class="contentBoxcontent"> 
    <a href="#">LED dialight information</a> 
    <img src="../common/Images/EN-12368_Euro.png" alt="" /> 
    <ul> 
     <li>Traffic light information</li> 
     <li>Signalling information</li> 
     <li>Caltran signals light</li> 
    </ul> 
</div> 

<div class="contentBoxcontent"> 
    <a href="#">Signalling information</a> 
    <img src="../common/Images/caltransignals.png" alt="" /> 
    <ul> 
     <li>Traffic light information</li> 
     <li>Signalling information</li> 
     <li>Light test data</li> 
     <li>LED light</li> 
    </ul> 
</div>