[CSS] IE Table issue

T

Thomas Scheffler

Hi,

I currently try a table layout, as I canot come along with IE and a div
layout. Now I have another issue with this browser.

I have a table (MainTable) with 100% width and heigh. It covers the
whole window though. It has a left column, that consist of a single row
and so is 100% heigh, too.
Now when I insert in this very cell another table. I cannot maximize it
to 100%. I need another table in there because it needs a different
layout, than in the right part of MainTable. Gecko based browser sizing
the table correct to the height of the surrounding cell, ie doesn't. It
just draws the table as no style is asigned.

css:
html, body, #maintable, .max {
margin: 0px;
height: 100%;
width: 100%;
}

html:

<html>
<body>
<table id="maintable">
<tr>
<td>
<table class="max">
<tr><td colspan="2">..</td></tr>
<tr><td class="max">...</td>
<td class="max">...</td>
</tr>
</table>
</td>
<td><!--the right cell of MainTable --></td>
</tr>
</body>
</html>

This is just to give you an idea. You can see, that the last row of
nested table should be maximized. Why isn't that done in IE?
Thank you for any help.

Cheers Thomas
 
R

Richard

Hi,
Click to expand...
I currently try a table layout, as I canot come along with IE and a div
layout. Now I have another issue with this browser.
Click to expand...
I have a table (MainTable) with 100% width and heigh. It covers the
whole window though. It has a left column, that consist of a single row
and so is 100% heigh, too.
Now when I insert in this very cell another table. I cannot maximize it
to 100%. I need another table in there because it needs a different
layout, than in the right part of MainTable. Gecko based browser sizing
the table correct to the height of the surrounding cell, ie doesn't. It
just draws the table as no style is asigned.
Click to expand...


Instead of the second table, use tbody.
This will act as a table within a table as you want.

In css you could do the same thing with less.
<div id="outer">
<div id="inner" style="position:relative; left:50px; top:50px;"></div>
</div>

In this example, the inner division begins 50 pixexls (diagonally) from the
top left corner of the outer division.
 
B

Beauregard T. Shagnasty

Richard said:
Instead of the second table, use tbody.
This will act as a table within a table as you want.
Click to expand...

Please go back to watching television. The WWW is too complicated for you.
 
S

Steve Pugh

Thomas Scheffler said:
I have a table (MainTable) with 100% width and heigh. It covers the
whole window though. It has a left column, that consist of a single row
and so is 100% heigh, too.
Now when I insert in this very cell another table. I cannot maximize it
to 100%. I need another table in there because it needs a different
layout, than in the right part of MainTable. Gecko based browser sizing
the table correct to the height of the surrounding cell, ie doesn't. It
just draws the table as no style is asigned.

html, body, #maintable, .max {
margin: 0px;
height: 100%;
width: 100%;
}

<table id="maintable">
<tr>
<td>
<table class="max">
<tr><td colspan="2">..</td></tr>
<tr><td class="max">...</td>
<td class="max">...</td>
</tr>
</table>
</td>
<td><!--the right cell of MainTable --></td>
</tr>
Click to expand...


Let's look at what height: 100% means in CSS. The least ambiguous
definition is given in CSS 2.1 (and CSS 2.1 was written with current
browser behaviour in mind so with luck it will be both theoretically
and practically useful).

"Specifies a percentage height. The percentage is calculated with
respect to the height of the generated box's containing block. [...] A
percentage height on the root element is relative to the viewport."
http://www.w3.org/TR/CSS21/visudet.html#propdef-height

So you've set the <html> element to the height of the viewport, the
<body> element to the height of the <html> element and the #maintable
table to the height of the <body>.

IE applies the above rather short sightedly and because you haven't
specified a height for the <td> that contains the .max table it
interprets it as "100% of undefined" = "auto" = "determined by
content".

Adding height:100% to the cell that contains the inner table fixes the
problem in IE. As IE doesn't support any of the useful selectors and
as you don't want this 100% height to affect _all_ the cells in the
inner table as well you'll need to use a class (or inline style).

But a word of caution:
"CSS 2.1 does not define what percentage values of 'height' refer to
when specified for table cells."
http://www.w3.org/TR/CSS21/tables.html#height-layout

So it's possible that other/future browsers will interpret this height
and the heights where you set class="max" on the inner cells in a
different way.

Steve
 
S

Steve Pugh

Richard said:
Instead of the second table, use tbody.
This will act as a table within a table as you want.
Click to expand...

Idiot. tbody must be an immediate child of a table. You can not stick
a body into a cell.

Steve
 
T

Thomas Scheffler

Steve said:
I have a table (MainTable) with 100% width and heigh. It covers the
whole window though. It has a left column, that consist of a single row
and so is 100% heigh, too.
Now when I insert in this very cell another table. I cannot maximize it
to 100%. I need another table in there because it needs a different
layout, than in the right part of MainTable. Gecko based browser sizing
the table correct to the height of the surrounding cell, ie doesn't. It
just draws the table as no style is asigned.

html, body, #maintable, .max {
margin: 0px;
height: 100%;
width: 100%;
}

<table id="maintable">
<tr>
<td>
<table class="max">
<tr><td colspan="2">..</td></tr>
<tr><td class="max">...</td>
<td class="max">...</td>
</tr>
</table>
</td>
<td><!--the right cell of MainTable --></td>
</tr>
Click to expand...



Let's look at what height: 100% means in CSS. The least ambiguous
definition is given in CSS 2.1 (and CSS 2.1 was written with current
browser behaviour in mind so with luck it will be both theoretically
and practically useful).

"Specifies a percentage height. The percentage is calculated with
respect to the height of the generated box's containing block. [...] A
percentage height on the root element is relative to the viewport."
http://www.w3.org/TR/CSS21/visudet.html#propdef-height

So you've set the <html> element to the height of the viewport, the
<body> element to the height of the <html> element and the #maintable
table to the height of the <body>.

IE applies the above rather short sightedly and because you haven't
specified a height for the <td> that contains the .max table it
interprets it as "100% of undefined" = "auto" = "determined by
content".

Adding height:100% to the cell that contains the inner table fixes the
problem in IE.
Click to expand...

I had to asign this property also to the tr that contains the td. As you
can see the nested table contains a row where each td is of class "max".
The IE asigns the height of the table to this, which breaks the layout,
because there is a row above them with a fixed height element in it
(image). How do I tell IE to have the upper td (colspan=2) to shrink to
that image and to maximize the lower cells, so that the whole table is
100% of the surrounding cell. IE ignores the assignment of height to the
upper tr and td. What should I do there? This seems to be a common
problem for my layout. How do I tell (IE) to maximize a cell until the
other affected cells are at mimimum size.
So it's possible that other/future browsers will interpret this height
and the heights where you set class="max" on the inner cells in a
different way.
Click to expand...

I'm already tortured by the current ones that I have to survive :eek:)
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Colspan probs 2
SendGrid email issue in responsive Gmail 1
Can someone tell me if this a real tracker? Or is it one designed to show you a different message at certain times, ie. acting like one? 0
Hello I am learning how to code and I tried making a calculator with HTML and js with some CSS I am stuck at thing, Like the screen value is 0
HTML Table Issue 2
Need help with <rowspan> in an HTML table 1
Sort by number of characters 1
Having trouble centering contents of td ? 3

Members online

No members online now.
Total: 203 (members: 0, guests: 203)
Robots: 477

Forum statistics

Threads
474,432
Messages
2,571,680
Members
48,796
Latest member
Greg L.

Latest Threads

Top