Question

So there’s probably a simple answer to this, but I can’t seem to get my CSS inset box shadow to work correctly on a table cell. I have the following CSS rules:

table { 
    border: 1px solid #aaa; 
}
table th, td { 
    width: 76px; 
    height: 50px; 
    vertical-align: middle; 
    text-align: center;
}
tr { 
    border: 1px solid #aaa; 
}
td.color {
    -moz-box-shadow:inset 0 0 10px 0 #222;
    -webkit-box-shadow:inset 0 0 10px 0 #222;
    box-shadow:inset 0 0 10px 0 #222;
    border: 1px solid #000;
}
td.red { ... }
td.green { ... }

So I’m trying to add classes .color and .red, .green, etc. to certain cells with the inset shadow to have them look indented in the table row. For some reason, the inset shadow is mis-aligned by 1px.

I posted an image of the problem here:

Resulting in the bottom and right edges having 1px of background showing through.

Any ideas? Thanks!

-Nate

Answer 1

Works if you add display: block; to td.color

td.color {
    -moz-box-shadow:inset 0 0 10px 0 #222;
    -webkit-box-shadow:inset 0 0 10px 0 #222;
    box-shadow:inset 0 0 10px 0 #222;
    border: 1px solid #000;
    display: block;
}

http://jsfiddle.net/jasongennaro/DjAfw/

tested on Chrome