Question

I’m trying to give some table cells on my website an inset shadow… However the shadow is only displaying in firefox, and not in safari or chrome. However these browsers do pick up the fact that I have told all the even rows to have a white background. I’m hoping there’s any easy solution out there!

Here’s the code:

.appdescription tr:nth-child(even) {
background-color: white;
-webkit-border-radius: 2px;
-webkit-box-shadow: inset 0px 0px 3px 0px rgba(0,0,0,0.3);
   -moz-box-shadow: inset 0px 0px 3px 0px rgba(0,0,0,0.3);
   -moz-border-radius: 2px;
   box-shadow: inset 0px 0px 3px 0px rgba(0,0,0,0.3);
   border-radius: 2px;
}

and the html:

<div class="appdescription">
<table>
<tr><td><h3> Current Version </h3></td></tr>
<tr><td><a> 1.4 </a></td></tr>
<tr><td><h3> Description </h3></td></tr>
<tr><td><a>
How much of a Doctor Who fan are you? 
Do you consider yourself a Whovian?
Do you know more than your friends about Doctor Who?
Find out by taking the Whovian Test.

Developed by Fabula Studios
www.fabulastudios.co.uk </a></td></tr>
<tr><td><h3> What's new </h3></td></tr>
<tr><td><a> New Logo </a></td></tr>

Answer 1

Add a display: block; to that CSS and it should work.

But I advise you to leave tables and completely transform that piece to a simple <ul>