Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Sep 2011
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    td height="0" ie

    Hey,
    I'm using tables as part of an image layout and for some reason IE ignores the height declaration on table cells. I actually want the table cells to be hidden so im trying to set the height to 0. They each need a width applied but no height. It displays fine in FF and such but IE displays the cell as 1px in height.

    Here is the html and css im using to test the problem:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Test</title>
    <link rel="stylesheet" type="text/css" href="style.css" media="screen,projection">
    </head>
    <body>
    
    <table cellspacing="0" cellpadding="0" height="0">
    <tr>
    <td width="1000" height="0"></td>
    </tr>
    </table>
    
    </body>
    </html>

    Code:
    table {
    margin: 0;
    padding: 0;
    font-size: 0px;
    line-height: 0;
    background: yellow;
    border:0;
    }
    
    table tr {
    margin: 0;
    padding: 0;
    font-size: 0px;
    line-height: 0;
    height: 0;
    }
    
    table tr td {
    margin: 0;
    visibility:hidden;
    padding: 0;
    font-size: 0px;
    line-height: 0;
    height: 0;
    }
    
    
    body {
            background: #353535;
            font-family: Geneva, Arial, Helvetica, san-serif;
    		margin: 20px;
            }

    Any help would be greatly appreciated.
    Thanks,
    Chris

  • #2
    LRM
    LRM is offline
    New Coder
    Join Date
    Sep 2011
    Posts
    11
    Thanks
    0
    Thanked 2 Times in 2 Posts
    I'm not getting it. Why no height? Why not just eliminate the cells border, padding and margin?

  • #3
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,677
    Thanks
    6
    Thanked 1,008 Times in 981 Posts
    I’m not getting another thing: Why tables? That’s really a outdated method (like, 11 years old!) and isn’t necessary at all unless you create HTML e-mails.

  • #4
    New Coder
    Join Date
    Aug 2011
    Posts
    50
    Thanks
    0
    Thanked 2 Times in 2 Posts
    set overflow:hidden on the style for the <td> elements
    Don't forget to mark solution providing post as "Answered".
    It helps others to find correct solutions!

  • #5
    New to the CF scene
    Join Date
    Sep 2011
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hey, thanks for the replies. Unfortunately overflow:hidden on the table elements doesn't work.
    The reason for using tables is that I'm using an image slicer generated from Paint Shop Pro. Here is the full code generated for the image:

    Code:
    <table id="headertable" border="0" cellpadding="0" cellspacing="0" width="960" height="240">
    
    <tr>
    <td rowspan="2" colspan="1" width="71" height="192">
    <img name="headerv150" src="<?php bloginfo('template_directory'); ?>/images/headerv15_1x1.jpg" width="71" height="192" border="0"></td>
    <td rowspan="1" colspan="2" width="194" height="155">
    <img name="headerv151" src="<?php bloginfo('template_directory'); ?>/images/headerv15_1x2.jpg" width="194" height="155" border="0"></td>
    <td rowspan="2" colspan="2" width="695" height="192">
    <img name="headerv152" src="<?php bloginfo('template_directory'); ?>/images/headerv15_1x3.jpg" width="695" height="192" border="0"></td>
    </tr>
    
    <tr>
    <td rowspan="1" colspan="2" width="194" height="37">
    <img name="headerv153" src="<?php bloginfo('template_directory'); ?>/images/headerv15_2x1.jpg" width="194" height="37" border="0"></td>
    </tr>
    
    <tr>
    <td rowspan="1" colspan="2" width="132" height="29">
    <img name="headerv154" src="<?php bloginfo('template_directory'); ?>/images/headerv15_3x1.jpg" width="132" height="29" border="0"></td>
    <td rowspan="1" colspan="2" width="579" height="29" style="background: url(<?php bloginfo('template_directory'); ?>/images/headerv15_3x2.jpg);>
    <div id="access">
    <?php wp_nav_menu( 'sort_column=menu_order&container_id=menu&menu_id=navigation&menu_class=horizontal' ); ?>
    </div>
    </td>
    <td rowspan="1" colspan="1" width="249" height="29">
    <img name="headerv156" src="<?php bloginfo('template_directory'); ?>/images/headerv15_3x3.jpg" width="249" height="29" border="0"></td>
    </tr><tr><td rowspan="1" colspan="5" width="960" height="19">
    <img name="headerv157" src="<?php bloginfo('template_directory'); ?>/images/headerv15_4x1.jpg" width="960" height="19" border="0"></td>
    </tr>
    
    <tr>
    <td width="71" height="0"></td>
    <td width="61" height="0"></td>
    <td width="133" height="0"></td>
    <td width="446" height="0"></td>
    <td width="249" height="0"></td>
    </tr>
    
    </table>
    It all displays fine except for the last row that contains the empty cells. They need to have a fixed width so that the rest of the cells are displayed properly, however as they are I need the height to be set to 0 to prevent them from being shown and adding extra space below the image.

    Any ideas?
    Thanks.


  •  

    Tags for this Thread

    Posting Permissions

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