SitePoint Sponsor

User Tag List

Results 1 to 4 of 4

Threaded View

  1. #1
    SitePoint Member
    Join Date
    Jun 2012
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Izzygrid CSS table not displaying in Chrome and Safari

    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
    Last edited by ralph.m; Sep 5, 2012 at 02:13. Reason: added code tags


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •