Fixed Height For Table Cell Using CSS in Internet Explorer

  • Thread starter Thread starter Nathan Sokalski
  • Start date Start date
N

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.
 
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.
 
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/...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/
 
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.
 
I actually do have that property set in my stylesheet, so obviously that
isn't solving my problem.
 
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?
 
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)
 
Sorry about that, the height actually was specified in the td, but I still
have the same problem.
 
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.
 
Yes, good source. I am on the mailing list. Interesting to see what ppl are
having problems with (css). Regards.
 
Back
Top