bug in style system?

[i5mast]

why can i not make the following TD smaller?

<table width="100%" cellspacing="0" cellpadding="0" border="0">
<tr>
<td style="height: 15px !important; border: 1px solid black;">
<hr>
</td>
</tr>
</table>

when i load this example in DOM Inspector, computed value for TD height is 25px.
when the height is above 25, the computed value is correct. weird, no?

[bzbarsky]

<td> is not allowed to have content overflow it, so if the <hr>+margins is 25px or more, that's how tall the <td> will be.

[i5mast]

i've tried specifying heigh and margin for HR. it didn't seem to help.

<table width="100%" cellspacing="0" cellpadding="0" border="0">
<tr>
<td style="height: 15px !important; border: 1px solid black; padding: 0px">
<hr style="height: 1px !important; margin: 0px; border: 1px solid black;">
</td>
</tr>
</table>

DOM inspector still says the computed height for TD -> 25px; the height for HR is auto.
so how can specify the height for HR then?

thanks

[bzbarsky]

Looks like it'll always force that space around it (which makes sense in the context in which <hr> is meant to be used...)

[japh]

This works for me in a stylesheet:

Code: Select all

hr {
  border-style:none;
  border-top:3px solid #D0E2F7;
  height:3px;
}