Jag har en gridd som jag önskar bygga upp av ett antal div:ar. I Explorer ser det ut som jag tänkt mig men i Opera och Firefox saknas de blåa raderna som finns med i Explorer. Sedan är måtten olika. CSS problem med en enkel gridd
Vad är galet?
<code>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head" runat="server">
<title>T E S T</title>
<meta http-equiv="Content-Language" content="sv" />
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />
<meta http-equiv="imagetoolbar" content="no" />
<style type="text/css">
body {
margin:30px;
background-color:#fff;
font:10px arial, helvetica, sans-serif;
color:#222;
}
.twindow {
background-color:#e1e1e1;
width:100%;
}
.twindow_caption {
background-color:#dcdcdc;
border-color:#ccc #ccc #ccc #ccc;
border-style:solid;
border-width:1px 1px 1px 1px;
padding:1px 1px 1px 8px;
font-size:13px;
height:18px;
color:#222;
letter-spacing:2px;
position:relative;
}
.twindow_content {
background-color:transparent;
border-color:#ccc #ccc #ccc #ccc;
border-style:solid;
border-width:0px 1px 0px 1px;
padding: 15px 3px 0px 3px;
position:relative;
}
.twindow_botten {
background-color:transparent;
border-color:#ccc #ccc #ccc #ccc;
border-style:solid;
border-width:0px 1px 1px 1px;
padding: 15px 3px 0px 3px;
position:relative;
}
.grid {
background-color:transparent;
width:100%;
clear:both;
}
.grid_row_a {
background-color: blue;
width:100%;
clear:both;
}
.grid_row_b {
background-color:transparent;
width:100%;
clear:both;
}
.cola {
background-color:yellow;
padding: 0px 15px 2px 15px;
width:100px;
float:left;
}
.colb {
background-color:Lime;
padding: 0px 15px 2px 15px;
width:100px;
float:left;
}
</style>
</head>
<body>
<div style="width:500px;">
<div class="twindow">
<div class="twindow_caption">Min gridd</div>
<div class="twindow_content">
<div class="grid">
<div class="grid_row_a">
<div class="cola">1</div>
<div class="colb">2</div>
<div class="cola">3</div>
</div>
<div class="grid_row_b">
<div class="cola">4</div>
<div class="colb">5</div>
<div class="cola">6</div>
</div>
<div class="grid_row_a">
<div class="cola">7</div>
<div class="colb">8</div>
<div class="cola">9</div>
</div>
</div>
</div>
<div class="twindow_botten"> </div>
</div>
</div>
</div>
</body>
</html>