CSS box shadow on table cell misaligned

Question

So there may be a simple answer to this question, but I can't get my CSS paste window shadow to work correctly in the 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 { ... } 

Therefore, I am trying to add the classes .color and .red , .green , etc. to certain cells with a shadow insert, so that they look like the indentation in the row of the table. For some reason, the insert shadow is misaligned to 1px.

I posted the problem image here:

The result is at the bottom and right edges having 1px of the background passing through.

Any ideas? Thanks!

-Nate

Answer 1

It works if you add display: block; in 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

Answer 2

This is ie9 input solution to input shadow error in table

 input { box-shadow: 0px 0px 5px #3699FF; border-collapse: separate; } 

border-collapse: separate; - shock point

Answer 3

I am afraid that I can not replicate your problem, however you have problems with the syntax with the shadow insert panel. Try using this code instead:

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

Answer 4

Just a note of this 1px issue in Chrome (also tested in Safari 5 and FF 5)

http://jsfiddle.net/pxfunc/sZqV5/

border on the cells seems to be related to the problem, you can remove the border of the cell and the shadow is true. Just as @Jason Gennaro has already been sent, display:block on the cell also captures the shadow.

Consider posting your data to the Chromium error list: http://code.google.com/p/chromium/issues/list