I’m at a total loss as to why this doesn't work in Firefox.
This is a strait forward box with four rows. While the text is displayed properly in both IE and Firefox the background color doesn't display properly(it displays at the top of the browser in FireFox).
Any indication as to why this violates the W3 Standard would be appreciated.
---- HTML----
<div class="dFrame">
<div class="dR1">
<div class="dR1C1">
</div>
<div id="id_dR1C2">
</div>
</div>
<div class="dR2">
<div class="dR2C1">
</div>
<div id="id_dR2C2">
</div>
<div class="dR2C3">
</div>
</div>
<div class="dR3">
<div class="dR3C1">
The Text is in the right place but the background color displayes at the top in Firefox???
</div>
</div>
<div class="dR4">
<div class="dR4C1">
</div>
<div class="dR4C2">
</div>
</div>
</div>
----CSS----
..dFrame
{
width:800px;
}
..dR1, .dR2, .dR3, .dR4
{
margin:0;
padding:0;
}
..dR1C1, #id_dR1C2
{
float:left;
width:50%;
height:20px;
}
#id_dR1C2
{
background-color:Fuchsia;
}
..dR2C1, #id_dR2C2, .dR2C3
{
float:left;
width:15%;
height:300px;
background-color:red;
}
#id_dR2C2
{
width:70%;
}
..dR3C1
{
width:100%;
height:25px;
background-color:blue;
}
..dR4C1, .dR4C2
{
float:left;
width:50%;
height:75px;
background-color:green;
}