Div overlapping in Firefox

Question

Hi, Please see the html below

it works fine in IE, but in Firefox it overlaps..please try and give me solution. When the position of the div inside the td was given static, it's working properly.But i need absolute there since i need to use the left and top attributes.Any help is 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

Well of course it overlaps. In every browser. You're absolute-positioning elements with exactly the same left​/​top values, how could it not? (Plus you're using position: fixed, which won't work in IE6, but will establish a different containing parent in other browsers.)

As Richard says, you could give each td element position: relative so that the absolutes inside are positioned relative to the cell. But if, as it looks like, all you want is three divs side-by-side, forget both absolute positioning and tables, and just say:

<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>