I have this table setup below, but the “Right Cell, Row 1” is not reducing to minimum height in IE (works in FF); it’s like 65% higher than it should be.
Anyone know what the deal is?
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td colspan="2">Top Cell, Row 1</td>
</tr>
<tr>
<td rowspan="2">
Left Cell, Column 1
</td>
<td height="1">Right Cell, Row 1</td>
</tr>
<tr>
<td>Right Cell, Row 2</td>
</tr>
</table>
height=1what?
i don’t work with tables any more (barring very simple tables) but it would seem easier to use an external style sheet and restrict the height of the cell by applying a class and using em’s.
Just a thought.
ok, applying <td style=“height: 1px;”>, or even height: 200px; won’t work. The cell automatically goes to about 500px high. The lower is like 150px.
Depends on what your DOCTYPE is. If it’s XHTML 1.0 Strict, IE is technically (well, actually it’s not supposed to read xhtml, as it doesn’t deal with text/xml properly) doing its job (td doesn’t have a height attribute in XHTML 1.0 Strict. As fisherboy stated, go with css and see if that works.
Thanks for the replies so far.
I have the doctype:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
I imported a style sheet, but it still didn’t work. I made a class and set it to the cell.
<link href="sheet.css" rel="stylesheet" type="text/css">
I have attached an image to show what the code is doing and what it should be doing.
OK. Is there any way to see what you’re doing online? Can you post the URL?
If you can it may help figure out what’s happening. 
Try setting font-size:0 and line-height:0 for the cell, too. I think IE reserves space for one line of text, even if the cell is empty.
(Not that I can understand why anyone would want a 1px-heigh table cell, but…)
Hello
? this seems to work
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>12345 12345 12345 12345 12345</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
.x{height:300px;}
.y{height:200px;}
.z{height:100px;}
</style>
<script type="text/javascript">
</script>
</head>
<body>
<table width="100%" border="1" cellspacing="0" cellpadding="0">
<tr>
<td colspan="2">Top Cell, Row 1</td>
</tr>
<tr>
<td rowspan="2" class="x">
Left Cell, Column 1
</td>
<td class="z">Right Cell, Row 1</td>
</tr>
<tr>
<td class="y">Right Cell, Row 2</td>
</tr>
</table>
</body>
</html>
from a quick look, it appears to be stretching out because of the cell on the left. If you add content to that left cell, the right side cell will naturally expand. Also the fact that you are using a colspan doesn’t help You will need to look at nesting a table inside that left cell i believe.
Nadia
Thanks for all the replies.
fisherboy,
Example: http://www.willistononline.com/asfd.php
AutisticCuckoo,
the cell is actually expanding to about 400px. The cell isnt actually supposed to be 1px high; the 1px high just reduces the cell to minimum height. The cell will end up being about 200-300px high. If someone did want a 1px high cell, they’d need to add “overflow: hidden;”.
all4nerds,
wierd…
Nadia P,
The left cell actually has the most content. It is about 500px high. The colspan is necessary (because that cell spans across the top).
What’s supposed to happen is, the top cell stays minimum height (say 200 pixels) at all times, and the lower one stretches downwards the rest of the way (if the content doesn’t meet the bottom of the page).
Notice the code near the bottom 'style=“height: 10px;”. It is attached to the cell which should be smaller (top right one). I did not import a stylehseet, because it didn’t help the previous time (don’t see why it would now). If anyone thinks i should continue to import, let me know.
In my vary, vary rare case, i cannot nest a table. Sounds insane, but I simply cannot due to a border issue. I could probably use <divs>, but my passionate hate for their flexibility drives me to stick with tables. I have used tables for 4 years, and I’ve got everything to work exactly how I wnated it, eventually.
If anyone has any ideas, please post them. This is starting to drive me nuts.
all4nerds,
I modified your code, and it continued the problem I was having. All i did was delete the top row (has no affect), and change CSS heights.
The code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>12345 12345 12345 12345 12345</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
.x{height:900px;}
.z{height:100px;}
</style>
<script type="text/javascript">
</script>
</head>
<body>
<table width="100%" border="1" cellspacing="0" cellpadding="0">
<tr>
<td rowspan="2" class="x">
Left Cell, Column 1
</td>
<td class="z">Right Cell, Row 1</td>
</tr>
<tr>
<td class="y">Right Cell, Row 2</td>
</tr>
</table>
</body>
</html>
Hello
you left .y a td height out
give td’s a height, or let content controll height
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>12345 12345 12345 12345 12345</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
.xx{height:900px;}
.zx{height:800px;}
.z{height:100px;}
</style>
<script type="text/javascript">
</script>
</head>
<body>
<table width="100%" border="1" cellspacing="0" cellpadding="0">
<tr>
<td rowspan="2" class="x">
Left Cell, Column 1
</td>
<td class="z">Right Cell, Row 1</td>
</tr>
<tr>
<td class="y">Right Cell, Row 2</td>
</tr>
</table>
</body>
</html>
I don’t know what Y’s height will be, so I need it “auto-stretch” to the bottom; it could be 500 pixels on one page, and 2000 pixels on another. I also want to keep “Z” cell 200 pixels high (and not a pixel higher).
Is there no way to do this? The method you show won’t work because it’s fixed heights. If the heights are enlarged, Y cell will become higher, but Z will also (which is what im trying to stop).
I seriously don’t believe you are going to get a table layout to be pixel perfect anyway. what if someone increases the text in their browser, is your layout going to hold or will it break anyway? (just something to think about 
Nadia
All my content is in pixels, so no.
hi mate. I signed up here just to give u a solution. I spent hours trying to do it in IE too.
Basically have your code like this:
<table style:height=100%>
<tr><td height=200px></td></tr>
<tr><td heigh=100%></td></tr>
<tr><td height=20px></td></tr>
</table>
Its the 100% that will push the rest of the cells height back to the height you set it at. Best to use styles too. Let me know if this fixed it for u too.
what an idot. i was wrong because it pushes all the content off the screen. im still working on it…
ok after hours of hacking away. it is the doc type.
I used
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
and changed it to
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”>
and it worked.
Sorry to go a bit off topic, but do you actually need to have the doc type there???
Hi evoe. The simple answer is yes.
There are 4 main DTD’s (Document Type Declaration)
HTML Transitional
HTML Strict
XHTML Transitional
XHTML Strict
The DOCTYPE tells the browser how to render the page. A lot of IE bugs can be overcome by choosing a Strict DOCTYPE as it forces IE to adopt a more standards compliant mode. In this case I suspect there is a lot of deprecated (old, to be deleted at some time) markup and it will need to use a Transitional DTD.
IMO, use HTML Strict as much as possible, validate continuously, get it right in FF then fix the few remaining problems in IE.