SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  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

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,319
    Mentioned
    462 Post(s)
    Tagged
    8 Thread(s)
    That page looks the same in Firefox and Chrome to me. Have you refreshed your browser etc?

  3. #3
    SitePoint Member
    Join Date
    Jun 2012
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,319
    Mentioned
    462 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by Wera View Post
    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.


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
  •