Fixed Height For Table Cell Using CSS in Internet Explorer

Discussion:

(too old to reply)

Nathan Sokalski

2009-09-28 19:58:22 UTC

I have an HTML table for the layout of one of my pages. I have the table set
to height:100% so that the table covers the entire visible area. There are
two tr tags, the first of which I want to be a fixed height. To do this I
set the CSS height property to the desired height, but it still takes up
more vertical space than I specify unless the second tr takes up enough to
fill the rest of the space. I have tried this in IE7 and FireFox, and the
problem is only occurring in IE7. How can I make the tr use exactly the
amount of space I want? Any help would be appreciated. Thanks.

--
Nathan Sokalski
***@hotmail.com
http://www.nathansokalski.com/

rob^_^

2009-09-28 20:34:00 UTC

Permalink

body(height:100%}

Post by Nathan Sokalski
I have an HTML table for the layout of one of my pages. I have the table
set to height:100% so that the table covers the entire visible area. There
are two tr tags, the first of which I want to be a fixed height. To do
this I set the CSS height property to the desired height, but it still
takes up more vertical space than I specify unless the second tr takes up
enough to fill the rest of the space. I have tried this in IE7 and
FireFox, and the problem is only occurring in IE7. How can I make the tr
use exactly the amount of space I want? Any help would be appreciated.
Thanks.
--
Nathan Sokalski
http://www.nathansokalski.com/

Nathan Sokalski

2009-09-28 22:59:01 UTC

Permalink

I actually do have that property set in my stylesheet, so obviously that
isn't solving my problem.
--
Nathan Sokalski
***@hotmail.com
http://www.nathansokalski.com/

Post by rob^_^
body(height:100%}

Post by Nathan Sokalski
I have an HTML table for the layout of one of my pages. I have the table
set to height:100% so that the table covers the entire visible area.
There are two tr tags, the first of which I want to be a fixed height. To
do this I set the CSS height property to the desired height, but it still
takes up more vertical space than I specify unless the second tr takes up
enough to fill the rest of the space. I have tried this in IE7 and
FireFox, and the problem is only occurring in IE7. How can I make the tr
use exactly the amount of space I want? Any help would be appreciated.
Thanks.
--
Nathan Sokalski
http://www.nathansokalski.com/

rob^_^

2009-09-28 21:37:37 UTC

Permalink

Hi Nathan,

Have a look at the source html at Bing.com (uses a letter-box table layout).

I tried just using a table within the body, but could not get it to work on
all popular browsers (HTML 4). I think using div's for the page layout is
the way to go (see bing.com... aka. bing, bong, bang)

Regards.

PA Bear [MS MVP]

2009-09-28 21:51:31 UTC

Permalink

What page?

Cascading Style Sheets (CSS)
http://msdn2.microsoft.com/en-us/ie/aa740476.aspx

More developer resources:

IE Developer Center
http://msdn.microsoft.com/en-us/ie/default.aspx

MSDN IE Development Forums
http://social.msdn.microsoft.com/forums/en-US/category/iedevelopment/

Learn IE8
http://msdn.microsoft.com/en-us/ie/aa740473.aspx

Expression Web SuperPreview for Internet Explorer (free, stand-alone visual
debugging tool for IE6, IE7, and IE8)
http://www.microsoft.com/downloads/details.aspx?displaylang=en&FamilyID=8e6ac106-525d-45d0-84db-dccff3fae677

Expression Web SuperPreview Release Notes
http://www.microsoft.com/expression/products/Web_SuperPreviewReleaseNotes.aspx

Validators:
http://validator.w3.org/
http://jigsaw.w3.org/css-validator/
--
~Robear Dyer (PA Bear)
MS MVP-IE, Mail, Security, Windows Client - since 2002
www.banthecheck.com

Post by Nathan Sokalski
I have an HTML table for the layout of one of my pages. I have the table set
to height:100% so that the table covers the entire visible area. There are
two tr tags, the first of which I want to be a fixed height. To do this I
set the CSS height property to the desired height, but it still takes up
more vertical space than I specify unless the second tr takes up enough to
fill the rest of the space. I have tried this in IE7 and FireFox, and the
problem is only occurring in IE7. How can I make the tr use exactly the
amount of space I want? Any help would be appreciated. Thanks.

Nathan Sokalski

2009-09-28 22:56:56 UTC

Permalink

One of the pages that displays the first tr as the wrong height is my Just
For Fun page at:

http://www.nathansokalski.com/justforfun/index.aspx

One of the pages that displays the first tr as the correct height is my
ASP.NET 2.0/3.5 page at:

http://www.nathansokalski.com/code/aspnet.aspx

You will notice that the main difference between these two pages is that the
ASP.NET 2.0/3.5 page has more buttons visible in the navigation, which is
what is causing the first tr to not take up as much space. But you will also
notice that the Just For Fun page's navigation is not causing the second tr
to be only the necessary height for the navigation or the full available
height that should be left for the second tr. Not only are the heights not
what I would expect them to be, but I can't figure out how IE7 is
calculating the heights that it is using. Any ideas? Thanks.
--
Nathan Sokalski
***@hotmail.com
http://www.nathansokalski.com/

Post by PA Bear [MS MVP]
What page?
Cascading Style Sheets (CSS)
http://msdn2.microsoft.com/en-us/ie/aa740476.aspx
IE Developer Center
http://msdn.microsoft.com/en-us/ie/default.aspx
MSDN IE Development Forums
http://social.msdn.microsoft.com/forums/en-US/category/iedevelopment/
Learn IE8
http://msdn.microsoft.com/en-us/ie/aa740473.aspx
Expression Web SuperPreview for Internet Explorer (free, stand-alone
visual debugging tool for IE6, IE7, and IE8)
http://www.microsoft.com/downloads/details.aspx?displaylang=en&FamilyID=8e6ac106-525d-45d0-84db-dccff3fae677
Expression Web SuperPreview Release Notes
http://www.microsoft.com/expression/products/Web_SuperPreviewReleaseNotes.aspx
http://validator.w3.org/
http://jigsaw.w3.org/css-validator/
--
~Robear Dyer (PA Bear)
MS MVP-IE, Mail, Security, Windows Client - since 2002
www.banthecheck.com

Post by Nathan Sokalski
I have an HTML table for the layout of one of my pages. I have the table set
to height:100% so that the table covers the entire visible area. There are
two tr tags, the first of which I want to be a fixed height. To do this I
set the CSS height property to the desired height, but it still takes up
more vertical space than I specify unless the second tr takes up enough to
fill the rest of the space. I have tried this in IE7 and FireFox, and the
problem is only occurring in IE7. How can I make the tr use exactly the
amount of space I want? Any help would be appreciated. Thanks.

PA Bear [MS MVP]

2009-09-28 23:45:18 UTC

Permalink

See Warning section here:

http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fwww.nathansokalski.com%2Fjustforfun%2Findex.aspx&profile=css21&usermedium=all&warning=1&lang=en

and here:

http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fwww.nathansokalski.com%2Fcode%2Faspnet.aspx&profile=css21&usermedium=all&warning=1&lang=en

Also see
http://validator.w3.org/check?uri=http%3A%2F%2Fwww.nathansokalski.com%2Fjustforfun%2Findex.aspx&charset=%28detect+automatically%29&doctype=Inline&group=0

and
http://validator.w3.org/check?uri=http%3A%2F%2Fwww.nathansokalski.com%2Fcode%2Faspnet.aspx&charset=%28detect+automatically%29&doctype=Inline&group=0

Post by Nathan Sokalski
One of the pages that displays the first tr as the wrong height is my Just
http://www.nathansokalski.com/justforfun/index.aspx
One of the pages that displays the first tr as the correct height is my
http://www.nathansokalski.com/code/aspnet.aspx
You will notice that the main difference between these two pages is that the
ASP.NET 2.0/3.5 page has more buttons visible in the navigation, which is
what is causing the first tr to not take up as much space. But you will also
notice that the Just For Fun page's navigation is not causing the second tr
to be only the necessary height for the navigation or the full available
height that should be left for the second tr. Not only are the heights not
what I would expect them to be, but I can't figure out how IE7 is
calculating the heights that it is using. Any ideas? Thanks.

Post by Nathan Sokalski
I have an HTML table for the layout of one of my pages. I have the table set
to height:100% so that the table covers the entire visible area. There are
two tr tags, the first of which I want to be a fixed height. To do this I
set the CSS height property to the desired height, but it still takes up
more vertical space than I specify unless the second tr takes up enough to
fill the rest of the space. I have tried this in IE7 and FireFox, and the
problem is only occurring in IE7. How can I make the tr use exactly the
amount of space I want? Any help would be appreciated. Thanks.

Nathan Sokalski

2009-09-29 00:41:47 UTC

Permalink

I looked at the links you mentioned, and here is what I found:

The first two are only warnings, they do not mention any problems with my
css.

The second two are attempting to validate the wrong source. When I did a
View Source in the browser, it was not the same as what the link you gave me
had.

Any ideas?
--
Nathan Sokalski
***@hotmail.com
http://www.nathansokalski.com/

Post by PA Bear [MS MVP]
http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fwww.nathansokalski.com%2Fjustforfun%2Findex.aspx&profile=css21&usermedium=all&warning=1&lang=en
http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fwww.nathansokalski.com%2Fcode%2Faspnet.aspx&profile=css21&usermedium=all&warning=1&lang=en
Also see
http://validator.w3.org/check?uri=http%3A%2F%2Fwww.nathansokalski.com%2Fjustforfun%2Findex.aspx&charset=%28detect+automatically%29&doctype=Inline&group=0
and
http://validator.w3.org/check?uri=http%3A%2F%2Fwww.nathansokalski.com%2Fcode%2Faspnet.aspx&charset=%28detect+automatically%29&doctype=Inline&group=0

Post by Nathan Sokalski
I have an HTML table for the layout of one of my pages. I have the
table
set
to height:100% so that the table covers the entire visible area. There are
two tr tags, the first of which I want to be a fixed height. To do this I
set the CSS height property to the desired height, but it still takes up
more vertical space than I specify unless the second tr takes up enough to
fill the rest of the space. I have tried this in IE7 and FireFox, and the
problem is only occurring in IE7. How can I make the tr use exactly the
amount of space I want? Any help would be appreciated. Thanks.

PA Bear [MS MVP]

2009-09-29 02:19:51 UTC

Permalink

I only used the links you posted, Nathan.

See the references I cited earlier or post here instead:
http://social.msdn.microsoft.com/forums/en-US/category/iedevelopment/

Post by Nathan Sokalski
The first two are only warnings, they do not mention any problems with my
css.
The second two are attempting to validate the wrong source. When I did a
View Source in the browser, it was not the same as what the link you gave me
had.
Any ideas?

Post by Nathan Sokalski
I have an HTML table for the layout of one of my pages. I have the
table
set
to height:100% so that the table covers the entire visible area. There are
two tr tags, the first of which I want to be a fixed height. To do
this
I
set the CSS height property to the desired height, but it still takes up
more vertical space than I specify unless the second tr takes up
enough
to
fill the rest of the space. I have tried this in IE7 and FireFox, and the
problem is only occurring in IE7. How can I make the tr use exactly the
amount of space I want? Any help would be appreciated. Thanks.

bruce barker

2009-09-29 03:04:08 UTC

Permalink

TR don't accept a height. you need to specify the height of the td's.
one way is via css

tr.mytr td {height:50px; overflow:auto;}

<table><tr class="mytr"><td></td></tr></table>

-- bruce (sqlwork.com)

Post by Nathan Sokalski
I have an HTML table for the layout of one of my pages. I have the table set
to height:100% so that the table covers the entire visible area. There are
two tr tags, the first of which I want to be a fixed height. To do this I
set the CSS height property to the desired height, but it still takes up
more vertical space than I specify unless the second tr takes up enough to
fill the rest of the space. I have tried this in IE7 and FireFox, and the
problem is only occurring in IE7. How can I make the tr use exactly the
amount of space I want? Any help would be appreciated. Thanks.

Nathan Sokalski

2009-09-30 00:06:12 UTC

Permalink

Sorry about that, the height actually was specified in the td, but I still
have the same problem.
--
Nathan Sokalski
***@hotmail.com
http://www.nathansokalski.com/

TR don't accept a height. you need to specify the height of the td's. one
way is via css
tr.mytr td {height:50px; overflow:auto;}
<table><tr class="mytr"><td></td></tr></table>
-- bruce (sqlwork.com)

Post by Nathan Sokalski
I have an HTML table for the layout of one of my pages. I have the table
set to height:100% so that the table covers the entire visible area.
There are two tr tags, the first of which I want to be a fixed height. To
do this I set the CSS height property to the desired height, but it still
takes up more vertical space than I specify unless the second tr takes up
enough to fill the rest of the space. I have tried this in IE7 and
FireFox, and the problem is only occurring in IE7. How can I make the tr
use exactly the amount of space I want? Any help would be appreciated.
Thanks.

ANONYMOUS

2009-10-01 22:21:41 UTC

Permalink

For CSS related problems and solutions by experts who use only notepad
or other text editors, try this forum:

http://www.css-discuss.org/mailman/listinfo/css-d

You will get definite answers within 24 hours. You need to register but
you can use your free hotmail or yahoo account or create a new account
for this purpose.

Hope this helps.

Post by Nathan Sokalski
I have an HTML table for the layout of one of my pages. I have the table set
to height:100% so that the table covers the entire visible area. There are
two tr tags, the first of which I want to be a fixed height. To do this I
set the CSS height property to the desired height, but it still takes up
more vertical space than I specify unless the second tr takes up enough to
fill the rest of the space. I have tried this in IE7 and FireFox, and the
problem is only occurring in IE7. How can I make the tr use exactly the
amount of space I want? Any help would be appreciated. Thanks.

rob^_^

2009-10-02 04:06:34 UTC

Permalink

Yes, good source. I am on the mailing list. Interesting to see what ppl are
having problems with (css). Regards.

For CSS related problems and solutions by experts who use only notepad or
http://www.css-discuss.org/mailman/listinfo/css-d
You will get definite answers within 24 hours. You need to register but
you can use your free hotmail or yahoo account or create a new account for
this purpose.
Hope this helps.