[G.Lindqvist]

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:

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

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


FF:


Hur jag vill att det ska se ut: