Is this a CSS bug?

Question

<div class="FrameBig" style="float:left; width:25%; height:45px; margin-top:9px; margin-bottom:25px; margin-left:50px; text-align:left">

<table width="100%" cellpadding="0px" cellspacing="0px" border="0px">
<tr>
<td>Cell One</td>
<td>Cell Two</td>
</tr>
<tr>
<td>Cell Three</td>
<td>Cell Four</td>
</tr>
</table>

</div>

FrameBig is

.FrameBig
{
    background-color:#D1F3FF;
    color:#5793C9;
    font-size:medium;
    font-weight:bold;
    margin:2px;
}

The above code produces a table that is entirely blue (the background colour in FrameBig)

The most bizarre thing is when I change it to this:

<div class="FrameSmall" style="float:right; width:25%; height:45px; margin-top:9px; margin-right:50px; margin-bottom:50px; text-align:left">

<table width="100%" cellpadding="0px" cellspacing="0px" border="0px">
<tr>
<td height=45px width=50% valign="middle">
Diner ID:</td><td height=45px width=50% align="right" valign="middle">
        <asp:DropDownList ID="DinerUID" runat="server"></asp:DropDownList></td>
</tr>
<tr>
<td height=45px width=50% valign="middle">
Diner Name:</td><td height=45px width=50% align="right" valign="middle">
        <asp:DropDownList ID="DinerNameUID" runat="server"></asp:DropDownList></td>
</tr>
</table>
</div>

You would expect it to be the same as the first one, with a blue background, but for some reason only the FIRST row is blue, the second row is white.

Can anyone offer any explanation? The rest of the CSS file contains absolutely nothing that could interfere.

Answer 1

No, it is a bug in your code. You have set the class for the container div and I think there occurred a typo as well. In the first code the height of the two trs were inside the range of 45px[ the height of the div]. But in the second example each tr has got height 45px and thats why the color was applied for the first tr only.

Change the class "FrameBig" to the table inside the div and you will get the background color of all rows to be blue.

<style>
.FrameBig
{
    background-color:#D1F3FF;
    color:#5793C9;
    font-size:medium;
    font-weight:bold;
    margin:2px;
}

</style>
<div style="float:right; width:25%; height:45px; margin-top:9px; margin-right:50px; margin-bottom:50px; text-align:left">

<table width="100%" cellpadding="0px" cellspacing="0px" border="0px" class="FrameBig">
<tr>
<td height=45px width=50% valign="middle">
Diner ID:</td><td height=45px width=50% align="right" valign="middle">
        <asp:DropDownList ID="DinerUID" runat="server"></asp:DropDownList></td>
</tr>
<tr>
<td height=45px width=50% valign="middle">
Diner Name:</td><td height=45px width=50% align="right" valign="middle">
        <asp:DropDownList ID="DinerNameUID" runat="server"></asp:DropDownList></td>
</tr>
</table>
</div>

Answer 2

Your div FrameSmall is 45px height, as is your first row of the table. There is defenitely something in your css that's not correct.

Answer 3

This is expected behavior - the table is bigger than the div, and the color is the background color of the div, not the table or its first row.
See: W3 on overflow
QuirksMode - Overflow visible
jsbin: Your table with half a row colored