css - Border rendering strangely -
i have page contains table.
the <tr>
's have border-bottom: 1px dotted black;
, can see image below, rendering quite strangely. know why might be?
relevant css
.basket-item{ border-bottom: 1px dotted black; border-top: 1px dotted black; padding: 10px 0; } .basket-item td:nth-of-type(2){ //included seems second td in every row padding: 25px; vertical-align: top; text-align: left; }
html structure standard table, <tr>
's have class of .basket-item
thanks in advance help
extending comment:
this problem seems only/mainly affects chrome (or webkit), , after unsuccessful trial, come this:
add
h4 { margin-bottom: 1.5em; /* or whatever length ends in integer pixel */ }
the reason this, have specified
font-size: 14px;
and chrome has internal css looks like:
h4 { -webkit-margin-before: 1.33em; /* works margin-top */ -webkit-margin-after: 1.33em; /* works margin-bottom */ }
that makes floating point number pixel (14 * 1.33 = 18.62
), , (probably other elements below, float: left
elements), chrome seems have need "calculate" remaining space height "placeholder", , ends floating point number "very close 200px".
observation:
in chrome, <td>
should 250px height (including padding
). <td>
has padding: 25px
, "inner height" should 200px
, default style, in developer tool, chrome shows <td>
199.609375px
height. overwriting margin-bottom
of h4
integer "normalized" inner height 200px.
Comments
Post a Comment