SitePoint Sponsor |
|
User Tag List
Results 1 to 10 of 10
-
Aug 11, 2004, 12:51 #1
- Join Date
- Jul 2004
- Location
- Cache Valley, USA
- Posts
- 30
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
style="height: 100%" -- Netscape/Mozilla/Opera vs. IE
This question has been asked dozens of times on this site, but not one thread seems to have a directly relevant answer, nor one that has helped me solve the problem.
It's the age old height = 100% problem.
HTML:
<td height="100%">
CSS:
<td style="height: 100%">
In IE my site renders perfectly -- the table fills the whole screen as expected. In Netscape/Opera, the table only grows as much as it is required to grow to contain the text therein. This causes issues for my page, which has a side menu that is supposed to span the height of the page.
Specifically, my page is formed of a table with 4 cells... a 120px by 24px top-left cell, a [remaining width] by 24px top-right cell, a 120px by [remaining height] bottom-left cell which will hold a variable length menu, and a [remaining width] by [remaining height] bottom-right cell which will hold the variable length content. Even if the variable-length content of both bottom cells is very short, the table should still expand vertically to fit document.
Once and for all, does anyone actually know the solution to this very common issue??
-
Aug 11, 2004, 13:47 #2
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
Hi,
This question has been asked dozens of times on this site, but not one thread seems to have a directly relevant answer
Code:<?xml version="1.0" encoding="iso-8859-1"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Untitled Document</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <style type="text/css"> /* commented backslash mac hack \*/ html, body{height:100%; padding:0;margin:0} /* end hack */ body { height:100%; padding:0; margin:0 } table { height:100%; width:100%; border:1px solid #000; } td {border:1px solid red;vertical-align:top;} td#toprow {height:24px;width:120px;} </style> </head> <body> <table cellspacing="0" cellpadding="0"> <tr > <td id="toprow">1</td> <td>2</td> </tr> <tr> <td>3</td> <td>4</td> </tr> </table> </body> </html>
PaulLast edited by Paul O'B; Aug 11, 2004 at 14:34.
-
Aug 11, 2004, 14:23 #3
- Join Date
- Jul 2004
- Location
- Cache Valley, USA
- Posts
- 30
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Actually, I tried that. I've got the DOCTYPE declaration for transitional, and I've got the html, body {height: 100%}. Still doesn't work.
Thanks for the reply anyway though.
-
Aug 11, 2004, 14:30 #4
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
Actually, I tried that. I've got the DOCTYPE declaration for transitional, and I've got the html, body {height: 100%}. Still doesn't work
Show me your code as we could be guessing all night.
Paul
-
Aug 12, 2004, 12:13 #5
- Join Date
- Jul 2004
- Location
- Cache Valley, USA
- Posts
- 30
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
I found the problem. The table was nested inside a FORM, thus, the height of the table was set to 100% of the form element instead of the body element.
CSS specifies that a percent (%) height value causes the element to have a height value equal to the indicated % of the parent element. Since the FORM element has no height, the TABLE was being set to a height of 100% of [no height value], or 0 pixels -- and was naturally resized as content was added, rather than being set to 100% of the BODY element.
Internet Explorer must automatically assume that either the absolute height of the HTML or BODY element (I'm not sure which) is the pixel height of the whole document, and ignores any elements that cannot have a height value, like a FORM, in the height-inheritance hierarchy.
To me, Internet Explorer's method makes a lot more sense and is much easier to work with than the way CSS has specified it. I hope they consider changing that at some point.
To illustrate:
The first example below works in IE, Mozilla, and Opera as expected (note the lack of <style>html,body {height: 100%}</style>. The second example works in IE, but not in Opera -- the table is set to 100% of the height of the FORM, not the BODY. (For some reason the second example actually works in Firefox, which is odd since your own example, with the form tags added, behaves the same as Opera).
Example 1:
Code:<html> <body> <table style="height: 100%; width: 100%; border-style: solid; border-color: black; border-width: 2px"> <tr> <td style="width: 20%; background-color: #d0d0f4"> 1 </td> <td style="width: 80%; background-color: white"> 2 </td> </tr> </table> </body> </html>
Code:<html> <body> <form> <table style="height: 100%; width: 100%; border-style: solid; border-color: black; border-width: 2px"> <tr> <td style="width: 20%; background-color: #d0d0f4"> 1 </td> <td style="width: 80%; background-color: white"> 2 </td> </tr> </table> </form> </body> </html>
-
Aug 12, 2004, 16:57 #6
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
Originally Posted by irbrian
If you'd posted the correct code I would have pointed out your error straight away
Your examples above are not much use in working out the true rendering of css because you have invalid code (i.e. no doctype declaration). Therefore UA's will revert to quirks mode and use various means to support legacy and proprietary behaviour of elements.
This means you are very likely to get the wrong end of the stick as the browser is doing what it thinks best and not as it has been told.
In your above example you could simply have given your form a height of 100% and the examples would have worked in all three browsers.
Originally Posted by irbrian
If you add valid doctypes to your above examples then you will see that everything changes yet again.
Originally Posted by irbrian
As you see 100% height isn't best implemented in CSS as you can't specify 100% of something that is already itself specified as 100% of something else. Which is a great shame because it would make life a lot easier
Of course there are exceptions and it seems that tables can inherit the 100% from more than one nesting down. And ie will also inherit 100% from its parent on elements other than tables as well.
So you see - its as clear as mud
In order to have answered your first question I would have needed to know all the above which is why your first snippet of code really wasn't much use at all lol.
Anyway - have fun
Paul
-
Sep 13, 2004, 10:17 #7
- Join Date
- Jan 2003
- Posts
- 8
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
interesting thread. Any idea how I can apply the same principals to nested tables?
Eg (http://mompop.mine.nu/azur/en/): I am trying to force the following left navigation bar (which is a seperate nested table made up of three cells: 1 - Links, 2 - empty cell height 100%, 3: contact details) to expand the length of the right three cells.
Thanks,
Michael
-
Sep 13, 2004, 14:12 #8
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
Hi Michael,
I tried to access your page but it wouldn't load. I'll try again later and see id its been fixed
Paul
-
Sep 13, 2004, 14:29 #9
- Join Date
- Jan 2003
- Posts
- 8
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
sorry about that. the URL shoudl be http://mompop.mine.nu:8080/azur/en/ But, you shoudl know that the page is a work in progress. I am currently reworking the protion of code in question taking a CSS aproach (ditching the nested table). Still, no luck.
Thaks,
Michael
-
Sep 13, 2004, 14:49 #10
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
Still, no luck
The 3 col demo sticky thread shows some examples also.
The easiest technique for equal columns and 100% height is to use repeating bg images but of cours it does depend on circumstance.
As you're in the middle of changing your code I'll wait until you've finished (or until you run into problems)
I'm not keen on wading through tables anyway
Paul
Bookmarks