Izzygrid CSS table not displaying in Chrome and Safari

**Wera** · Sep 5, 2012 01:47

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:

Code:

<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 &amp; 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 &amp; 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:

Code:

		#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

**ralph.m** · Sep 5, 2012 02:12

That page looks the same in Firefox and Chrome to me. Have you refreshed your browser etc?

**Wera** · Sep 5, 2012 02:19

You're right. Thanks so much for looking at my problem. I don't know what changed in the last fifteen minutes but it now looks exactly how it should in all three browsers.

Apologies for wasting your time.

Best Regards.

**ralph.m** · Sep 5, 2012 02:21

Originally Posted by Wera

Apologies for wasting your time.

Heh heh, no problem! It happens. It's often necessary to refresh the browser or clear the cache when you are making site updates. Otherwise, the browser sometimes just uses what it has seen before.

User Tag List

Thread: Izzygrid CSS table not displaying in Chrome and Safari

Thread Tools

Display

Izzygrid CSS table not displaying in Chrome and Safari

Bookmarks

Bookmarks

Posting Permissions