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?

enter image description here

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

Popular posts from this blog

Why does Ruby on Rails generate add a blank line to the end of a file? -

keyboard - Smiles and long press feature in Android -

node.js - Bad Request - node js ajax post -