...

View Full Version : td height="0" ie



busker90
09-03-2011, 12:04 AM
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:


<!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>



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

LRM
09-03-2011, 04:14 AM
I'm not getting it. Why no height? Why not just eliminate the cells border, padding and margin?

VIPStephan
09-03-2011, 10:06 AM
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.

dotnetmind
09-03-2011, 01:15 PM
set overflow:hidden on the style for the <td> elements

busker90
09-03-2011, 07:31 PM
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:


<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.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum