IE ignores table cell height propery - why?

  • Thread starter Andrey Tarasevich
  • Start date
A

Andrey Tarasevich

Hello

This is probably something simple, but I can't seem to find an answer. Consider
the following code

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html style="width: 100%; height: 100%">
<body style="width: 100%; height: 100%">
<table style="width: 100%; height: 100%">
<tr><td style="height: 20px; border: 1px solid black"><p>1</p></td></tr>
<tr><td><p>2</p></td></tr>
<tr><td style="height: 20px; border: 1px solid black"><p>3</p></td></tr>
</table>
</body>
</html>

I want the first and the last row to have explicitly specified height and the
middle row to occupy the rest of the entire table height. The problem is that IE
6 is ignoring the 'height' specification for the first and the last rows' cells.
Every row in IE appears take exactly 1/3 of the table's height.

MS FrontPage's user interface ('Style' dialog) seems to suggest that in order to
use 'height' property I also have to specify a 'position' property (is this the
case?). Anyway, adding, say, 'position: relative' to the above 'td' styles
doesn't change anything.

Mozilla, on the other hand, seems to do what I expect it to do.

Am I doing something wrong? If that's the case, what's the right way to achieve
the required distribution of row heights?
 
N

Neredbojias

With neither quill nor qualm, Andrey Tarasevich quothed:
I want the first and the last row to have explicitly specified height and the
middle row to occupy the rest of the entire table height. The problem is that IE
6 is ignoring the 'height' specification for the first and the last rows' cells.
Every row in IE appears take exactly 1/3 of the table's height.
Click to expand...

Yes, I had virtually the same problem. Thereupon, I made a careful read
of the w3c spec regarding tables, specifically heights, and came to the
conclusion they didn't know how to do it, either.

You could try setting 1st & last rows to 1%, middle row to 98%, and
using a 1st/last div of height 20px but no guarantees. I honestly can't
remember what I did to resolve my own issue (had a few beers since then)
though probably it was to give up on the table altogether.
 
M

mbstevens

Andrey said:
Hello

This is probably something simple, but I can't seem to find an answer. Consider
the following code

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html style="width: 100%; height: 100%">
<body style="width: 100%; height: 100%">
<table style="width: 100%; height: 100%">
<tr><td style="height: 20px; border: 1px solid black"><p>1</p></td></tr>
<tr><td><p>2</p></td></tr>
<tr><td style="height: 20px; border: 1px solid black"><p>3</p></td></tr>
</table>
</body>
</html>
Click to expand...

Your page uses deprecated markup. Try changing to more modern markup.
The most common sympton of deprecated markup is
placing instructions about where or how a thing is displayed in
the (X)HTML markup instead of CSS.
I want the first and the last row to have explicitly specified height and the
middle row to occupy the rest of the entire table height. The problem is that IE
6 is ignoring the 'height' specification for the first and the last rows' cells.
Every row in IE appears take exactly 1/3 of the table's height.

MS FrontPage's user interface ('Style' dialog) seems to suggest
Click to expand...

The Frontpage website tool has a bad reputation for
writing IE specific code that does not work well with other
browsers. Consider actually learning web standars
(X)HTML/CSS, and then use a text editor with highlighting
as the tool to write with. Use an FTP client as a tool
to upload with instead of depending on Frontpage's FTP
tools, too.
that in order to
use 'height' property I also have to specify a 'position' property (is this the
case?).
Click to expand...

In this case it's probably some Frontpage quirk.
 
A

Andrey Tarasevich

mbstevens said:
Your page uses deprecated markup. Try changing to more modern markup.
The most common sympton of deprecated markup is
placing instructions about where or how a thing is displayed in
the (X)HTML markup instead of CSS.
...
Click to expand...

Yes, but that's beside the point. I do use CSS. The above code was created for
the sole purpose of serving as an artificial example in my post. Placing the
properties into CSS makes no difference.
The Frontpage website tool has a bad reputation for
writing IE specific code that does not work well with other
browsers. Consider actually learning web standars
(X)HTML/CSS, and then use a text editor with highlighting
as the tool to write with.
Click to expand...

My current knowledge of the above standards is more than sufficient for my
purposes, except for the issue in question.

FrontPage can be used as text editor with HTML highlighting, which is pretty
much how I use it now. There's no need to switch to any other editor.
Use an FTP client as a tool
to upload with instead of depending on Frontpage's FTP
tools, too.
Click to expand...

I'm perfectly happy with FrontPage's upload functionality, although I currently
use its HTTP upload, not FTP. It works perfectly fine, meaning the there's no
need to switch.
 
M

mbstevens

The problem is that IE
6 is ignoring the 'height' specification for the first and the last rows' cells.
Every row in IE appears take exactly 1/3 of the table's height.
Click to expand...

<html style="width: 100%; height: 100%">
<body style="width: 98%; height: 98%">
<table style="width: 100%; height: 100%">
<tr><td style="height: 20px; border: 1px solid
black"><p>1</p></td></tr>
<tr><td><p>2</p></td></tr>
<tr><td style="height: 20px; border: 1px solid
black"><p>3</p></td></tr>
</table>
</body>
</html>

....seems to work fine on ie6 for me. Of course, you get left with a
border of a few pixels.
 
A

Andrey Tarasevich

mbstevens said:
The problem is that IE

<html style="width: 100%; height: 100%">
<body style="width: 98%; height: 98%">
<table style="width: 100%; height: 100%">
<tr><td style="height: 20px; border: 1px solid
black"><p>1</p></td></tr>
<tr><td><p>2</p></td></tr>
<tr><td style="height: 20px; border: 1px solid
black"><p>3</p></td></tr>
</table>
</body>
</html>

...seems to work fine on ie6 for me. Of course, you get left with a
border of a few pixels.
Click to expand...

Yes, but unfortunately it stops working once you switch IE6 to "standard" mode
by adding that '!DOCTYPE' line from my original example. I would drop that line
without any doubt, but then IE6 will start acting weirdly with respect to
element widths...
 
M

mbstevens

Andrey said:
Yes, but unfortunately it stops working once you switch IE6 to "standard" mode
by adding that '!DOCTYPE' line from my original example. I would drop that line
without any doubt, but then IE6 will start acting weirdly with respect to
element widths...
Click to expand...

And, you really should have that doctype. So the solution that appears
to me is to not try to do the thing with a three cell table. There are
any number of good templates on the net that have a header and footer
with resizable stuff in the middle. I can point you to some if you're
interested.
 

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

Having trouble centering contents of td ? 3
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
Help needed with thank you message 5
Can anyone please help? HTML - two tables applying different styles 4
Help with my responsive home page 2
Why is the e.target not working here? 1
Image shifts to the right when export the page to pdf 4
Help with Visual Lightbox: Scripts 2

Members online

Total: 31 (members: 1, guests: 30)
Robots: 85

Forum statistics

Threads
473,770
Messages
2,569,586
Members
45,084
Latest member
HansGeorgi

Latest Threads

Top