#1
  1. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2009
    Posts
    335
    Rep Power
    246

    Table Cellspacing - firefox driving me nuts!


    Hi,

    What is wrong with Firefox?

    I cannot get rid of the spacing between table columns <td> cells?

    I have
    Code:
     <table cellpadding="0" cellspacing="0">
    Also this CSS
    Code:
    table * {
        padding:0 !important;
        margin:0 !important;
        border-collapse: collapse; 
        }
    The <th> are all snug and up close, but the <td>cells have a space between them I just cannot get rid of in Firefox?

    Why is FF behaving this way?

    Thanks,
    1DMF
    Last edited by 1DMF; March 19th, 2013 at 09:05 AM.
    Free MP3 Dance Music Downloads

    To err is human; To really balls things up you need Microsoft!
  2. #2
  3. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2012
    Location
    Troy, NY
    Posts
    46
    Rep Power
    68
    You should remove the wild card, its not helping. can you give us a little more to go one also. By default there should be no margins or padding between td's. are you using a reset?
  4. #3
  5. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2009
    Posts
    335
    Rep Power
    246
    I've removed it entirely it's made no difference.

    IE & Chrome work fine, FF & Opera don't and have additional unwanted padding / spacing cocking everything up.


    here is the HTML...

    1stly the form snippet with the AJAX div holder... (note it has templating mark-up in it!)

    Code:
                    <fieldset id="riskkey">                         
                        <legend id="keylegend">Risk Key</legend> 
                        <div id="ajwin"></div>                     
                    </fieldset>
    Here is the AJAX returned Table
    Code:
    <table cellpadding="0" cellspacing="0">  
        <thead>
            <th class="caseid">Case</td>
            <th class="adviser">Adviser</td>  
            <th class="cnames">Client Names</td>  
            <th class="reason">Risk Reason</td>
            <th class="rating">Rating</td>
        </thead>
    </table>
    <div>                            
    <table cellpadding="0" cellspacing="0">                                                 
        <tbody>                                                             
        <tmpl_loop name='overdue'>
        <tr>
            <td class="caseid"><tmpl_var name='Case_ID'></td>
            <td class="adviser"><tmpl_var name='Adviser'></td>
            <td class="cnames"><tmpl_var name='CNames'></td>
            <td class="reason"><tmpl_var name='Reason'></td>
            <td class="rating"><tmpl_var name='Rating'></td>
        </tr>
        <tr class="rule" >
            <td class="rule" colspan="5"></td>
        </tr> 
        </tmpl_loop>
        </tbody>
    </table>
    </div>
    and the CSS

    Code:
    /* AJAX WINDOW */
           
    #ajwin {
        display:none;
        background-color:#fff;
        z-index:999; 
        width:685px;
        height:200px !important; 
        position:absolute;         
        margin-top:-15px;
        margin-left:-5px;
        overflow:hidden; 
        }
        
    #ajwin table {
        text-align:left;
        display:inline;
        padding:0 !important;
        margin:0 !important;      
        }
            
    #ajwin table tr { 
        padding:0 !important;
        margin:0 !important;    
        }
          
    #ajwin table th {
        color:#ff0000; 
        text-decoration:underline;  
        text-align:left !important;          
        }    
                
    #ajwin div {
        overflow:auto;
        width:685px;
        height:185px !important;  
        }
    
    td.rating {
        text-align:center !important;
        }
                    
    /* table column widths */    
    #ajwin table td.caseid, #ajwin table th.caseid {
        display:inline-block;
        width:42px !important;
        border:0px solid #000;       
         }
        
    #ajwin table td.adviser, #ajwin table th.adviser {
        display:inline-block;
        width:133px !important;     
        border:0px solid #000;        
        padding-left:3px !important;     
        }        
    
    #ajwin table td.cnames, #ajwin table th.cnames {
        display:inline-block;
        width:185px !important;  
        border:0px solid #000;       
        }               
        
    #ajwin table td.reason, #ajwin table th.reason {
        display:inline-block;
        width:250px !important; 
        border:0px solid #000;  
        padding-left:2px !important;           
        } 
    
    #ajwin table td.rating, #ajwin table th.rating {
        display:inline-block;
        width:48px !important;    
        border:0px solid #000;     
        }
        
    #ajwin table td {
        padding:2px 0 !important;    
        }
                   
    #ajwin table td.rule {
        height:1px !important;
        width:100%  !important;
        background-color:#000; 
        padding:0 !important;   
        }
    
    #ajwin table tr.rule {
        height:1px !important;        
        }
    I'm not getting any errors in the FF error console!

    All help appreciated!

    1DMF
    Free MP3 Dance Music Downloads

    To err is human; To really balls things up you need Microsoft!
  6. #4
  7. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2012
    Location
    Troy, NY
    Posts
    46
    Rep Power
    68
    My suggestion would be to put back in a reset and remove all the declarations with widths on both tr's and td's. Also remove inline-block and then see what happens.
  8. #5
  9. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Oct 2009
    Location
    Nebraska, USA
    Posts
    876
    Rep Power
    275
    I see an issue here with opening/closing tags not matching up.
    opening with <th> ending with </td>
    Code:
    <table cellpadding="0" cellspacing="0"> 
    <thead> 
    <th class="caseid">Case</td> 
    <th class="adviser">Adviser</td> 
    <th class="cnames">Client Names</td> 
    <th class="reason">Risk Reason</td> 
    <th class="rating">Rating</td> 
    </thead> 
    </table>
  10. #6
  11. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2012
    Location
    Troy, NY
    Posts
    46
    Rep Power
    68
    oh yeah nice catch. you should also enclose your <th> tags within a row <tr>
  12. #7
  13. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2009
    Posts
    335
    Rep Power
    246
    no freaking way

    man this cold is dulling my brain more than I realise!

    thanks for the catch, talk about being sooo stupidly obvious!

    regards,
    1DMF.
    Free MP3 Dance Music Downloads

    To err is human; To really balls things up you need Microsoft!

IMN logo majestic logo threadwatch logo seochat tools logo