Problem with Explorer and simple rowspan usage

W

William

Hello all,

I hope someone can help me. I got a problem where some table layout
won't work the way it's supposed to work, using rowspan. It's hard to
explain, but in the example I give you below, there's 3 TDs, the right
and left TD have a rowspan of 2, and the middle TD have a rowspan of 1,
and the first row should have 16 pixels, and second row whatever height
the page requires. But it seems that depending on the left or right TD
height, it affects the height of my middle top TD, which is supposed to
be fixed at 16 pixels. Anyway, this example should explain it all. Is
there a way to make that tow middle TD fixed at 16 pixels? It works fine
with Firefox, but not with Explorer.


<html>
<head>
</head>
<body>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="100" rowspan="2">
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<br>
sahdfhs
<br>
sahdfhs
<br>
sahdfhs
<br>
sahdfhs
<br>
sahdfhs
<br>
sahdfhs
<br>
sahdfhs
<br>
sahdfhs
<br>
sahdfhs
<br>
sahdfhs
<br>
sahdfhs
<br>
sahdfhs
<br>
sahdfhs
<br>
sahdfhs
<br>
sahdfhs
<br>
sahdfhs
<br>
sahdfhs
<br>
sahdfhs
<br>
sahdfhs
<br>
sahdfhs
<br>
sahdfhs
<br>
sahdfhs
<br>
sahdfhs
<br>
sahdfhs
</td>
</tr>
</table>
</td>
<td width="900" height="16">Should always have 16 pixels height,
but doesnt on Explorer</td>
<td width="100" rowspan="2">bbbb</td>
</tr>
<tr>
<td width="900">
<br>
sahdfhs
<br>
sahdfhs
<br>
sahdfhs
<br>
sahdfhs
<br>
sahdfhs
<br>
sahdfhs
<br>
sahdfhs
<br>
sahdfhs
</td>
</tr>
</table>
</body>
</html>
 
J

John Hosking

William said:
Hello all,

I hope someone can help me. I got a problem where some table layout
won't work the way it's supposed to work, using rowspan.

You mean it won't work the way you expect it to work.
It's hard to
explain, but in the example I give you below, there's 3 TDs, the right
and left TD have a rowspan of 2, and the middle TD have a rowspan of 1,
and the first row should have 16 pixels, and second row whatever height
the page requires. But it seems that depending on the left or right TD
height, it affects the height of my middle top TD, which is supposed to
be fixed at 16 pixels. Anyway, this example should explain it all. Is
there a way to make that tow middle TD fixed at 16 pixels? It works fine
with Firefox, but not with Explorer.

IE is *special*.

[code snipped]

Your third column is meaningless, and has no effect on this behavior.
Likewise the inner table. The width settings are also irrelevant. You've
really got a 2x2 table, with the first column spanning two rows:

------------
¦ A ¦ B ¦
¦ ¦ ¦
¦ ¦-----¦
¦ ¦ C ¦
¦ ¦ ¦
------------

You've set a suggested minimum height on cell B. (I know you said
"height", but IE treats it as a min-height.) As the content in A grows
in length, B starts to grow in proportion in IE (in FF, B remains constant).

(If you test without setting a height for B, FF gives the same height
for B that we see in IE. Suggesting that FF takes height to be a maximum
or exact height, while IE considers it a minimum.)

Another variation, this one with only one row:

------------
¦ A ¦ B ¦
¦ ¦ ¦
¦ ¦ ¦
------------

You've set a suggested minimum height on cell B. As the content in A
grows in length, B starts to grow in proportion in IE and in FF. The
behavior of cell B in this case seems more intuitive, because we expect
the table to contain the data more than we expect the height
specification for B to be respected.

What we're left with is merely the fact that IE (6 and below; I'm not
testing with 7 here*) treats height as min-height, while FF treats it as
height. Sorry. That's IE for you.

A workaround? Maybe using DIVs would suit your purposes just as well (or
better). But I don't know how to beat it reliably using a table.

* I don't know if that was changed for IE7.
 
R

Roy A.

William skrev:
Hello all,

I hope someone can help me. I got a problem where some table layout
won't work the way it's supposed to work, using rowspan. It's hard to
explain, but in the example I give you below, there's 3 TDs, the right
and left TD have a rowspan of 2, and the middle TD have a rowspan of 1,
and the first row should have 16 pixels, and second row whatever height
the page requires. But it seems that depending on the left or right TD
height, it affects the height of my middle top TD, which is supposed to
be fixed at 16 pixels. Anyway, this example should explain it all. Is
there a way to make that tow middle TD fixed at 16 pixels? It works fine
with Firefox, but not with Explorer.


<html>
<head>
</head>
<body>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="100" rowspan="2">
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<br>
sahdfhs
<br>
sahdfhs
<br>
sahdfhs
<br>
sahdfhs
<br>
sahdfhs
<br>
sahdfhs
<br>
sahdfhs
<br>
sahdfhs
<br>
sahdfhs
<br>
sahdfhs
<br>
sahdfhs
<br>
sahdfhs
<br>
sahdfhs
<br>
sahdfhs
<br>
sahdfhs
<br>
sahdfhs
<br>
sahdfhs
<br>
sahdfhs
<br>
sahdfhs
<br>
sahdfhs
<br>
sahdfhs
<br>
sahdfhs
<br>
sahdfhs
<br>
sahdfhs
</td>
</tr>
</table>
</td>
<td width="900" height="16">Should always have 16 pixels height,
but doesnt on Explorer</td>
<td width="100" rowspan="2">bbbb</td>
</tr>
<tr>
<td width="900">
<br>
sahdfhs
<br>
sahdfhs
<br>
sahdfhs
<br>
sahdfhs
<br>
sahdfhs
<br>
sahdfhs
<br>
sahdfhs
<br>
sahdfhs
</td>
</tr>
</table>
</body>
</html>

IE is unable to do it in that way, at least without MSHTML. In HTML it
is not defined how row heights are calculated when a TD span more than
one row. Diffrent browsers could render the table diffrently. Most
browsers would do what you could expect, but some browsers may render
it useless.

The exact height of the rows could, as all ready pointet out, dependt
one how you define the word 'height'.
 
J

Jonathan N. Little

William said:
Hello all,

I hope someone can help me. I got a problem where some table layout
won't work the way it's supposed to work, using rowspan. It's hard to
explain, but in the example I give you below, there's 3 TDs, the right
and left TD have a rowspan of 2, and the middle TD have a rowspan of 1,
and the first row should have 16 pixels, and second row whatever height
the page requires. But it seems that depending on the left or right TD
height, it affects the height of my middle top TD, which is supposed to
be fixed at 16 pixels. Anyway, this example should explain it all. Is
there a way to make that tow middle TD fixed at 16 pixels? It works fine
with Firefox, but not with Explorer.

<snip code>

In a nutshell your markup is stinks of using tables, nested even, for
layout! Also what happen to the poor schmuck view your site with a old
14" monitor, or low on the corporate-ladder laptop where the max screen
resolution is 800x600? Your table is 1,100 pixels wide! Not sure why
your dims are fixed in pixels, better proportional to the text, maybe
for graphics, how know since <broken record>you have not supplied a
URL</broken record> so we must guess. Here is a better way:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<meta http-equiv="content-language" content="en-us">
<title>More User Friendly</title>
<style type="text/css">
HTML, BODY { margin: 0; padding: 0; }
/* margins on content to offset sidebars */
.content { margin: 0 100px 0 100px; padding: 0; }

/* background colors only to show layout! */
.banner { height: 16px; background-color: #efe; }

.sidebar { position: absolute; width: 100px; height: 100%;
background-color: #fee; }
.lefthand { top: 0; left: 0; }
.righthand { top: 0; right: 0; }

/* put nav links in lists */
.sidebar UL { list-style: none; margin: 0; padding: 0; }
.sidebar LI { margin: 0; }
</style>
</head>
<body>

<div class="sidebar righthand">
right sidebar
</div>

<div class="sidebar lefthand">
<ul>
<li>Nav Link</li>
<li>Nav Link</li>
<li>Nav Link</li>
<li>Nav Link</li>
<li>Nav Link</li>
</ul>
</div>

<div class="content">
<div class="banner">Top banner</div>
<h1>Your Page Content</h1>
<p>
Now the center section will scale
with browser window, far better!
</p>
</div>
</body>
</html>
 
W

William

Thanks for the explanation, I really appreciate and I guess now I
understand that "height" in this situation is the minimum height, so I
guess I'll have to go with another strategy :)

------
William


John said:
William said:
Hello all,

I hope someone can help me. I got a problem where some table layout
won't work the way it's supposed to work, using rowspan.

You mean it won't work the way you expect it to work.

IE is *special*.

[code snipped]

Your third column is meaningless, and has no effect on this behavior.
Likewise the inner table. The width settings are also irrelevant. You've
really got a 2x2 table, with the first column spanning two rows:

------------
¦ A ¦ B ¦
¦ ¦ ¦
¦ ¦-----¦
¦ ¦ C ¦
¦ ¦ ¦
------------

You've set a suggested minimum height on cell B. (I know you said
"height", but IE treats it as a min-height.) As the content in A grows
in length, B starts to grow in proportion in IE (in FF, B remains
constant).

(If you test without setting a height for B, FF gives the same height
for B that we see in IE. Suggesting that FF takes height to be a maximum
or exact height, while IE considers it a minimum.)

Another variation, this one with only one row:

------------
¦ A ¦ B ¦
¦ ¦ ¦
¦ ¦ ¦
------------

You've set a suggested minimum height on cell B. As the content in A
grows in length, B starts to grow in proportion in IE and in FF. The
behavior of cell B in this case seems more intuitive, because we expect
the table to contain the data more than we expect the height
specification for B to be respected.

What we're left with is merely the fact that IE (6 and below; I'm not
testing with 7 here*) treats height as min-height, while FF treats it as
height. Sorry. That's IE for you.

A workaround? Maybe using DIVs would suit your purposes just as well (or
better). But I don't know how to beat it reliably using a table.

* I don't know if that was changed for IE7.
 
W

William

Thanks Jonathan,

My site can't have a middle area with an unfixed width as it would
change the current design and would not look nice on some resolutions.
We want the site to work on 1024x768 resolutions or more, so the design
needs to be centered and fixed. But the example you gave me is a great
resource for me as I did not know you could layout pages this way using
divs and css positioning the way you do. I will keep this example with
me and experiment with it. Thanks a lot.
 
R

Roy A.

William skrev:
Is
there a way to make that tow middle TD fixed at 16 pixels? It works fine
with Firefox, but not with Explorer.

You could use somthing like this:

<table style="table-layout:fixed" width="100%" border="0"
cellpadding="0" cellspacing="0">
<tr>
<td width="100"> </td>
<td width="100%">
<div class="top" style="height:16px">16 pixels height</div>
<h1>Content</h1>
<p>sahdfhs</p>
</td>
<td width="100">bbbb</td>
</table>
 
J

Jonathan N. Little

William said:
Thanks Jonathan,

My site can't have a middle area with an unfixed width as it would
change the current design and would not look nice on some resolutions.
We want the site to work on 1024x768 resolutions or more, so the design
needs to be centered and fixed.

What possible reason would *require* a 1024x768? Your realize that (a)
Not everybody runs monitor resolutions > 800x600, (b)use their browser
MAXIMIZED, I rarely do, (3)can guarantee what font or font-size your
visitor will be using which can destroy a pixel-perfect layout!
But the example you gave me is a great
resource for me as I did not know you could layout pages this way using
divs and css positioning the way you do. I will keep this example with
me and experiment with it. Thanks a lot.

Table were used 10 years ago (nearly an eon in tech-years) as a hack
before stylesheets...
 

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

Members online

No members online now.

Forum statistics

Threads
473,744
Messages
2,569,484
Members
44,903
Latest member
orderPeak8CBDGummies

Latest Threads

Top