WN - Problem: CSS, side-by-side i både IE & FF

Jag har stora problem med att få en bakgrund att fungerar i en side-by-side rutor. Först ligger header-div:en som bakgrund. I den har jag lagt en ny row-div, sedan har jag lagt tre olika div:ar som fungerar som en tabell.

Använder mig av 456bereastreet kod exempel: http://www.456bereastreet.com/lab/equal_height_ii/

Alla rutor ska ha olika formulär element. Just nu har jag i första lagt en tabell, jag vet det är fel, men eftersom IE flippar ur hela tiden...

Hm, jag kanske förklarar dåligt, men kolla på koden och bilderna jag bifogat.

Html-kod:

Kod:

<div id="header">

 <div class="row"> 

 <div class="first"> <!-- Här ligger tabellen --> </div>

 <div class="second"><p>This box has less content than the one next to it.</p></div>

 <div class="third"><p>This box has less content than the one next to it.</p></div>

 <!--[if IE]>

  <div class="ieclear"></div>

 <![endif]--> 

 </div>

</div>

CSS-kod:

Kod:

#header {

 background: transparent url(../images/header.gif) no-repeat;

 width: 750px;

 height: 120px;

 display:table;

 border-collapse:separate;

}



.row { display: table-row; }

.row div { display:table-cell; }



.row .first {

 background: url(../images/bak2.gif) no-repeat;

 width: 200px;

}

.row .first p, .row .access h3 {

 margin-left: 0.5em;

}        

.row .first h3 {        

 margin-top: 0.5em;

 margin-bottom: -0.9em;

 font-weight: bold;

 font-size: 0.9em; 

}

.row .first table { padding: 0 10px; }



.row .first td {

 color: #666;

 font: 11px verdana, sans-serif;

 text-align: right;

}

.row .second { 

 background: url(../images/bak2.gif) no-repeat;

 width: 200px; 

}

.row .third { 

 background: url(../images/bak2.gif) no-repeat;

 width: 200px; 

}

IE:
http://wip.playheads.net/problem/ie.gif

FF:
http://wip.playheads.net/problem/ff.gif

Hur jag vill att det ska se ut:
http://wip.playheads.net/problem/finnish.gif