I have attempted to add a pricing grid to my site. It works perfectly in Firefox but does not display in Safari or Chrome.
The grid can be seen here: https://www.vappingo.com/how_we_are_priced/
Here is the html for the grid:
<table id="izzyGrid" unselectable="on" class="izzyGridSkin3"> <thead unselectable="on">
<tr unselectable="on"><th class="izzyGridDescription">*</th> <th unselectable="on">
<h4 unselectable="on">Proofreading<small unselectable="on">as low as $0.020 per word</small><small unselectable="on">
<br />
</small><span class="Apple-style-span" style="font-size: 12px; "><span class="Apple-style-span" style="color: rgb(0, 0, 0); font-weight: normal; "><a href="https://www.vappingo.com/order_here/" title="Order now" target="" style="color: rgb(102, 102, 102); font-weight: bold; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; " ><b><font class="Apple-style-span" color="#ff6600">Order now</font></b></a></span></span></h4>
</th><th class="izzyGridSelected" unselectable="on">
<h4 unselectable="on">Editing
<br />
<small unselectable="on">as low as $0.028 per word</small><small unselectable="on">
<br />
</small><span class="Apple-style-span" style="font-size: 12px; color: rgb(0, 0, 0); font-weight: normal; "><a href="https://www.vappingo.com/order_here/" title="Order now" target="" style="color: rgb(102, 102, 102); font-weight: bold; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; " ><b><font class="Apple-style-span" color="#ff6600">Order now</font></b></a></span><font class="Apple-style-span" color="#104b97"><span class="Apple-style-span" style="font-size: 12px; ">*</span></font></h4>
</th><th unselectable="on">
<h4 unselectable="on">Rewriting
<br />
<small unselectable="on">as low as $0.040 per word</small><small unselectable="on">
<br />
</small><small unselectable="on"><span class="Apple-style-span" style="font-family: 'Lucida Sans Unicode', 'Lucida Grande', sans-serif; font-size: 12px; "><a href="https://www.vappingo.com/order_here/" title="Order now" target="" style="color: rgb(102, 102, 102); font-weight: bold; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; " ><b><font class="Apple-style-span" color="#ff6600">Order now</font></b></a></span></small></h4>
</th></tr>
</thead> <tfoot unselectable="on">
<tr unselectable="on"><td class="izzyGridDescription"></td> <td unselectable="on"><a href="https://www.vappingo.com/order_here/" title="Order now" target="" ><b><font class="Apple-style-span" color="#ff6600">Order now</font></b></a></td><td class="izzyGridSelected" unselectable="on"><a href="https://www.vappingo.com/order_here/" title="Order now" target="" ><b><font class="Apple-style-span" color="#ff6633">Order now</font></b></a></td><td unselectable="on"><a href="https://www.vappingo.com/order_here/" title="Order now" target="" ><b><font class="Apple-style-span" color="#ff6600">Order now</font></b></a></td></tr>
</tfoot>
<tbody unselectable="on">
<tr unselectable="on"><td class="izzyGridDescription">
<br />
</td><td unselectable="on">
<br />
</td><td class="izzyGridSelected" unselectable="on">
<br />
</td><td unselectable="on"></td></tr>
<tr class="odd" unselectable="on"><td class="izzyGridDescription">72 hours</td><td unselectable="on">$0.020 per word</td><td class="izzyGridSelected" unselectable="on">$0.028 per word</td><td unselectable="on">$0.040 per word</td></tr>
<tr unselectable="on"><td class="izzyGridDescription">48 hours</td><td unselectable="on">$0.024 per word</td><td class="izzyGridSelected" unselectable="on">$0.032 per word</td><td unselectable="on">$0.050 per word</td></tr>
<tr class="odd" unselectable="on"><td class="izzyGridDescription">24 hours</td><td unselectable="on">$0.028 per word</td><td class="izzyGridSelected" unselectable="on">$0.036 per word</td><td unselectable="on">$0.060 per word</td></tr>
<tr unselectable="on"><td class="izzyGridDescription">Revisions</td><td unselectable="on">unlimited</td><td class="izzyGridSelected" unselectable="on">unlimited</td><td unselectable="on">-</td></tr>
<tr class="odd"><td class="izzyGridDescription">Money-back guarantee</td><td><img src="/bitrix/images/ok.png" unselectable="on" width="20" height="20" /></td><td class="izzyGridSelected"><img src="/bitrix/images/ok.png" unselectable="on" width="20" height="20" /></td><td>-</td></tr>
<tr><td class="izzyGridDescription">Correction of grammatical*errors</td><td><img src="/bitrix/images/ok.png" unselectable="on" width="20" height="20" /></td><td class="izzyGridSelected"><span class="Apple-style-span" style="color: rgb(99, 135, 168); "><img src="/bitrix/images/ok.png" unselectable="on" width="20" height="20" /></span></td><td>-</td></tr>
<tr class="odd"><td class="izzyGridDescription">Correction of spelling*errors</td><td><img src="/bitrix/images/ok.png" unselectable="on" width="20" height="20" /></td><td class="izzyGridSelected"><span class="Apple-style-span" style="color: rgb(99, 135, 168); "><img src="/bitrix/images/ok.png" unselectable="on" width="20" height="20" /></span></td><td>-</td></tr>
<tr><td class="izzyGridDescription">Correction of punctuation errors</td><td><img src="/bitrix/images/ok.png" unselectable="on" width="20" height="20" /></td><td class="izzyGridSelected"><span class="Apple-style-span" style="color: rgb(99, 135, 168); "><img src="/bitrix/images/ok.png" unselectable="on" width="20" height="20" /></span></td><td>-</td></tr>
<tr class="odd"><td class="izzyGridDescription">Content revisions & suggestions
<br />
<span class="Apple-style-span" style="color: rgb(0, 0, 0); font-weight: normal; "><small style="display: block; font: normal normal normal 11px/normal Tahoma, Geneva, sans-serif; color: rgb(134, 134, 134); ">Improvements to flow, readability and language</small></span></td><td><img src="/bitrix/images/ok.png" unselectable="on" width="20" height="20" /></td><td class="izzyGridSelected"><span class="Apple-style-span" style="color: rgb(99, 135, 168); "><img src="/bitrix/images/ok.png" unselectable="on" width="20" height="20" /></span></td><td>-</td></tr>
<tr><td class="izzyGridDescription">Clarity revisions & suggestions
<br />
<span class="Apple-style-span" style="color: rgb(0, 0, 0); font-weight: normal; "><small style="display: block; font: normal normal normal 11px/normal Tahoma, Geneva, sans-serif; color: rgb(134, 134, 134); ">Ensure content is logical, transitions are clear and arguments</small><small style="display: block; font: normal normal normal 11px/normal Tahoma, Geneva, sans-serif; color: rgb(134, 134, 134); ">are relevant.</small></span></td><td><img src="/bitrix/images/no.png" width="24" height="24" /></td><td class="izzyGridSelected"><img src="/bitrix/images/ok.png" unselectable="on" width="20" height="20" /></td><td>-</td></tr>
<tr class="odd"><td class="izzyGridDescription">Tone
<br />
<small>Ensure the tone is appropriate to the audience</small></td><td><img src="/bitrix/images/no.png" width="24" height="24" /></td><td class="izzyGridSelected"><img src="/bitrix/images/ok.png" unselectable="on" width="20" height="20" /></td><td><img src="/bitrix/images/ok.png" unselectable="on" width="20" height="20" /></td></tr>
<tr><td class="izzyGridDescription">Rewriting
<br />
<small>Rewriting text so that meaning remains the same</small></td><td><img src="/bitrix/images/no.png" width="24" height="24" /></td><td class="izzyGridSelected"><span class="Apple-style-span" style="color: rgb(99, 135, 168); "><img src="/bitrix/images/no.png" width="24" height="24" /></span></td><td><img src="/bitrix/images/ok.png" unselectable="on" width="20" height="20" /></td></tr>
<tr class="odd"><td class="izzyGridDescription">
<br />
</td><td>
<br />
</td><td class="izzyGridSelected">
<br />
</td><td>
<br />
</td></tr>
</tbody>
</table>
Here is the CSS:
#izzyGrid {
border-collapse:collapse; font: normal 12px "Lucida Sans Unicode", "Lucida Grande", sans-serif; margin:0 auto; }
#izzyGrid td,#izzyGrid th { text-align:center; padding:5px; border:1px solid #333;border-width:0 0 1px 0;}
#izzyGrid tfoot td { background:#fff; border:0;}
#izzyGrid .izzyGridDescription {
background: #666; color:#fff; text-align:left; padding-right:20px; font-weight:bold;
}
#izzyGrid thead .izzyGridDescription {
background:none;
}
#izzyGrid tfoot .izzyGridDescription {
background:none;
}
#izzyGrid thead h4 {font-size:16px; padding:5px; margin:0;}
#izzyGrid thead h4 small {display:block;font:normal 11px Tahoma, Geneva, sans-serif; color:#999;}
#izzyGrid .izzyGridDescription small {
display:block;font:normal 11px Tahoma, Geneva, sans-serif; color:#999;
}
#izzyGrid tfoot a { color:#666; font-weight:bold; padding:5px; }
#izzyGrid .izzyGridSelected {
background: #fff; color:#000; border: 5px solid #000; border-width:0 5px;
}
#izzyGrid th.izzyGridSelected {
border-width:5px 5px 0;
}
#izzyGrid thead .izzyGridSelected h4 {margin: 10px 10px 25px;}
#izzyGrid tfoot td.izzyGridSelected {
border-width:0 5px 5px; padding:20px 20px 20px;
}
#izzyGrid tr.odd { background:#e9e9e9;}
#izzyGrid.izzyGridSkin2 td { background:#F1F1F1;}
#izzyGrid.izzyGridSkin2 td.izzyGridSelected { background:#DDEED9;}
#izzyGrid.izzyGridSkin2 th {color: #fff; background:#000;}
#izzyGrid.izzyGridSkin2 th h4 small {color: #d9d9d9;}
#izzyGrid.izzyGridSkin2 th.izzyGridSelected {background:#256300;}
#izzyGrid.izzyGridSkin2 td.izzyGridDescription { background:#D9D9D9; color: #666;}
#izzyGrid.izzyGridSkin2 td.izzyGridDescription small {color: #868686;}
#izzyGrid.izzyGridSkin2 td,#izzyGrid.izzyGridSkin2 th { border:1px solid #000;}
#izzyGrid.izzyGridSkin2 tfoot td,#izzyGrid.izzyGridSkin2 tfoot td.izzyGridDescription,
#izzyGrid.izzyGridSkin2 tfoot td.izzyGridSelected,
#izzyGrid.izzyGridSkin2 th.izzyGridDescription { border:0; background:none;}
#izzyGrid.izzyGridSkin2 th h4 {margin:10px;}
#izzyGrid.izzyGridSkin3 td { background:#E8E9E9;}
#izzyGrid.izzyGridSkin3 td.izzyGridSelected { background:#fff;}
#izzyGrid.izzyGridSkin3 th {color: #666; background:#E8E9E9;}
#izzyGrid.izzyGridSkin3 th h4 small {color: #000;}
#izzyGrid.izzyGridSkin3 th.izzyGridSelected {background:#fff;}
#izzyGrid.izzyGridSkin3 td.izzyGridDescription { background:#E8E9E9; color: #333;}
#izzyGrid.izzyGridSkin3 td.izzyGridDescription small {color: #868686;}
#izzyGrid.izzyGridSkin3 td,#izzyGrid.izzyGridSkin3 th { border-color:#ccc;}
/*#izzyGrid.izzyGridSkin3 tfoot td,*/#izzyGrid.izzyGridSkin3 tfoot td.izzyGridDescription,
/*#izzyGrid.izzyGridSkin3 tfoot td.izzyGridSelected,*/
#izzyGrid.izzyGridSkin3 th.izzyGridDescription { border:0; background:none;}
#izzyGrid.izzyGridSkin3 th h4 {margin:10px;}
If anyone is able to help me with this I would really appreciate it.
Thanks