Est-ce un bug CSS?

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 est

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

Le code ci-dessus produit une table qui est entièrement bleu (la couleur de fond dans FrameBig)

La chose la plus bizarre est quand je change à ceci:

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

Vous vous attendez à ce qu'il soit le même que le premier, avec un fond bleu, mais pour une raison quelconque, seule la première rangée est bleue, la deuxième rangée est blanche e.

Quelqu'un peut-il offrir une explication? Le reste du fichier CSS ne contient absolument rien qui puisse interférer.

Answer 1

Non, c'est un bug dans votre code. Vous avez défini la classe pour le conteneur div et je pense qu'il y a également eu une faute de frappe. Dans le premier code, la hauteur des deux était à l'intérieur de la plage de 45px [la hauteur de la div]. Mais dans le deuxième exemple chaque tr a 45px de hauteur et c'est pourquoi la couleur a été appliquée pour le premier tr seulement.

Modifiez la classe "FrameBig" à la table à l'intérieur de la div et vous obtiendrez la couleur d'arrière-plan de toutes les lignes à être bleu.

<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

Votre div FrameSmall a une hauteur de 45 pixels, comme c'est votre première rangée de la table. Il y a définitivement quelque chose dans ton css qui n'est pas correct.

Answer 3

Ceci est un comportement attendu - la table est plus grande que la div, et la couleur est la couleur de fond du div, pas la table ou sa première rangée.
Voir: W3 on overflow
QuirksMode - Overflow visible
jsbin: Your table with half a row colored