Высота стола:100% не работает в Chrome, Safari, Opera

Question

Я кодирую следующий дизайн

CSS

#content1{
top:0;
width: 300px;
height: 250px;

}

#content2{
width: 300px;
height: 250px;

}

#content3{
width: 300px;
height: 250px;

}

#bottom{
width: 300px;
height: 75px;

}

код

<td width="300" valign="top" style="height:100%;">


      <table border="0" align="center" cellpadding="0" cellspacing="0"  height="100%">
       <tr>  
        <td valign="top">
         <div id="content1>/*****Content1****/</div>
        </td>
       </tr>
       <tr>
        <td valign="middle">
         <div id="content2/*****Content2****/</div>
        </td>
      </tr>
      <tr>
       <td valign="middle">
        <div id="content3/*****Content3****/</div>
       </td>
      </tr>
      <tr>
       <td valign="bottom">
        <div id="bottom/*****Content4****/</div>
       </td>
     </tr>
    </table>

 </td>

Вы можете увидеть это здесь, работая http://www.spoiledagent.com/about_karu1.html

Он работает идеально, как я хотел, с одинаковыми полями как в браузерах IE, так и в Mozilla, но он не выглядит хорошо ни в каком другом браузере, как Safari, Chrome и т. Д. Все блоки выглядят как слипшиеся.

Как мы можем сделать так, чтобы он выглядел одинаково во всех браузерах, как это происходит в IE

Спасибо

Answer 1

Дайте вашей таблице идентификатор и используйте этот CSS.

#tableid
{
border-collapse:separate;
border-spacing:0 20px;
}

Проверьте эту скрипку
Для получения дополнительной информации прочитайте это

Answer 2

Почему бы вам не положить их в список?

вот маленькая скрипка для тебя