PDA

Click to See Complete Forum and Search --> : Nested Tables Bug in IE

HighRise
07-11-2006, 10:01 AM
I am having an issue with nested tables in IE. Here's my code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Test Page</title>

<style type="text/css">
.headerCell
{
height: 25px;
white-space: nowrap;
}
</style>

</head>
<body style="background-color: CCCCCC;">
<table width="100%" cellspacing="0" cellpadding="0" border="1">
<tr>
<td class="headerCell" width="60%">Brief</td>
<td class="headerCell">Id</td>
<td class="headerCell" width="20%">Client</td>
<td class="headerCell" width="20%">Assigned Staff</td>
<td class="headerCell">Status</td>
<td class="headerCell">Total Time</td>
</tr>
<tr>
<td colspan="6" width="100%">
<table width="100%" cellspacing="0" cellpadding="0" border="1">
<tr>
<td>User</td>
<td>Description</td>
<td>Comments</td>
<td>Start/End</td>
<td>TotalTime</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
The problem is with the table widths. If you run this in IE and shrink the browser window until the table stops getting smaller, you'll see that it doesn't get as small as it could. Now try it in Firefox and it will work fine (the table gets to the point where it couldn't get any smaller without clipping or wrapping text.)

The really wierd thing is that, if you change the first cell in the outside table to <td class="headerCell" width="60%">Brief Description</td> (just adding the word "Description"), and then reload the page in IE, it works fine! Pretty wierd huh? So what am I doing wrong?
humbug
07-11-2006, 10:49 AM
That's weird, all right. Mind you, Firefox is doing a variety of the same thing. It's just not so obvious.

Both of them close up well if you set the text to "Brief De".

It's something to do with the width parameters, because if you take these out, it all closes up. Probably the two browsers are in dispute about what the width is that width="x%" is x% of, or whether it's OK to squeeze a width when the window is small.

While we are wringing our hands over IE, I'm afraid that the majority of users are still using it, so we have to pander to its foibles.
HighRise
07-11-2006, 11:54 AM
Hmm.. so do you have any workaround ideas? I've tried setting the "table-layout" style to "fixed" on the tables, which solves this problem, but creates many more. Unfortunatelly, I need the table and cells to have percentage widths. What do I do?? :confused:
ray326
07-11-2006, 11:42 PM
You've given the browser an impossible task by defining 100% total width on a subset of the table cells.
HighRise
07-12-2006, 08:41 AM
You've given the browser an impossible task by defining 100% total width on a subset of the table cells.
I assume you're talking about the fact that I set three of the six cells to have percentage widths? I did this for a reason: I want some of the cells to get bigger as the window gets bigger, and I want the rest to always remain as small as they can. Is there a better way I can achieve this.

I think you're right though... The problem is the way I'm setting the outside table's cell widths because if I set them all to 16.5%, it works.

Any ideas?