Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Westi on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

100% Height Using Tables 1

Status
Not open for further replies.
Zych

Zych

IS-IT--Management
Apr 3, 2003
313
US
Hi guys,

I tried to do a search and came up with a lot of info concerning this topic but from what I have found this is using the DIV tag. I know CSS is the best way to do things but I am not there yet.

This is what I need for now. I am using a table to make the template for my site. At the end I need to make the height of the last <td> to extend to the bottom of the page. (I am filling in one td with a color to finish off a side bar and another one with just white space.)

How can I do this? I do not mind using javascript but I do not know how to program it. I do know how to download certain ones and insert it into my code. I am also using PHP if that makes a difference. If I overlooked this being covered in a previous question I apologize. I did do a search to the best of my ability.

- Zych
 
Sort by date Sort by votes
This did not do the trick for me but thanks for trying. I just want to extend the last <tr><td> section. This did managage to put a red strip down the left but it covered my graphics that need to sit at the top. When I took out the color red it did nothing (at least what I could see.) I was hoping somebody may have some javascript that would auto adjust the height or something. I have tried to do a search for this but to no avail. Any other ideas?
 
Upvote 0 Downvote
Now if there was a way to truly make it a background color it may work. I need it to sit behind the table not over top of it.
 
Upvote 0 Downvote
Nevermind, I got it. I had to change the z-index to -1 and it worked great.

Thanks,

Zych
 
Upvote 0 Downvote
Just a side note. I tried to view this in Firefox and it does not work on it. Any ideas why this may be that way?
 
Upvote 0 Downvote
you have to make sure you doctype is like this

Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

not like this

Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "[URL unfurl="true"]http://www.w3.org/TR/html4/loose.dtd">[/URL]

i use to have this problem alot but that solve the problem
 
Upvote 0 Downvote

steven,

The example you are saying should be used is the wrong one. The latter example is the correct one, as it specifies the URL / URI of a dtd.

Dan


The answers you get are only as good as the information you give!

 
Upvote 0 Downvote
EVERYONE, please disregarad steven290's suggestion as it is implying you should make websites without complete and proper doctype (the first example is incomplete doctype which is similar to none, because it will be ignored). Solving a problem like that is going to make a lot worse in the long run.
 
Upvote 0 Downvote
Upvote 0 Downvote
Steven,

You may as well not have the DOCTYPE in your example - it is just not needed if you are not going to have a proper one in there.

Apart from Jeff's solution, there is also this post from last week with a non-table solution:


Both use a correct and valid DOCTYPE, and exhibit the same sort of results.

Dan


The answers you get are only as good as the information you give!
 
Upvote 0 Downvote
in the real world sometimes you have to break a couple of rules to achieve you clients needs, or you may loose that client. Hey boys you can't always follow your textbooks
 
Upvote 0 Downvote
you link is a non table solution - which wasn't his question, but everyone is entitled to their own opinion, i'm not gonna argue with you guys
 
Upvote 0 Downvote

I agree. For a paying client, most of my ethics are negotiable ;o)

For your own site (and this is his own site, as mentioned in his initial post), I would always strive to not break the rules, as it says something about you.

If I were hiring a programmer, and I had the choice between two - one who had a fully-compliant site, and one who had a site where rules were bent to achieve the same goal, I would be more likely to choose the former.

Just my views, of course!
Dan


The answers you get are only as good as the information you give!

 
Upvote 0 Downvote
Thanks for the replies. I am not trying to start any arguments but this does make one think. I do have this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "
If this is proper then what is causing the problem with the solution not to work with Firefox?

I know I need to update my skills and get away from depending on tables so much. I would also need to learn the differences between strict.dtd and loose.dtd. I am concerned with why it is failing when it references loose.dtd. Am I not following some standard in using the code to do what I want?

Thx,

Zych
 
Upvote 0 Downvote
The problem with the half-doctype solution is not that the partial doctype breaks the rules - it doesn't - but that it won't cause browsers to go into "standards compliance mode".

Instead of attempting (however badly) to render the page in accordance with the W3C standards, browsers will render in "quirks" mode - that is, in accordance with the historical behaviour of IE or Netscape browsers before the standards were adopted.

Now one effect of going with quirks mode is that [tt]<table height="100%">[/tt] renders in the way you want and expect it to render - sizing to either the height of the viewport or the height of the document, whichever is greater. In standards mode, 100% will mean 100% of the document - you have to use workarounds like Jeff's or use a background image to get the same effect.

So, you may feel that quirks mode is the way to go in achieving your layout. You may be right. However, there are dangers associated with it. Since each browser renders according to its own quirks, you may run into problems down the road keeping the appearance the same between browsers. Personally I think that - for that reason - quirks mode causes more potential problems than it solves, but your milage may vary. As ever, there are pros and cons to weigh up in each approach.

Now, where's Clive to tell you to use frames instead? ...

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd
 
Upvote 0 Downvote
Thanks for the info. You have been very helpful. The problem with Firefox seems to be the -1 in the z-axis. IE supports this but Firefox does not seem to. If I change it to 0 I can see it in both but it overlays my table so I can not see what the table has in it. Therefore I guess it is time for me to study the z-axis a little more. If anybody knows a quick way to set the z-axis to 0 or greater but then move the table so it will be above I would appreciate it. I did try and set the table to 1 and the DIV to 0 but I must not be doing it right since it did not work.

I also decided to see what would happen when I played with the doctype as suggested above. This did not do anything. They both behaved as if I did not change anything. Which is probably good since I would prefer to stay with the correct conventions.

- Zych
 
Upvote 0 Downvote
Close but no cigar, Mr. Hunt.

What is clearly called for here is an iframe [smarty].

Code: 
<html>
<title>Quirks Mode Outer Page</title><body>
<table width="100%" height="100%" style="background:red"><tr><th>  
<iframe width="100%" height="90%" src="standardsmode.htm"></iframe>
</th></tr><table>
</body></html>

Note that the iframe src could be standards mode.

Clive
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

198709km
  • Locked
  • Question
Grouping XML key value using XSLT
Replies
0
Views
663
198709km
198709km
caykamanj1966
  • Locked
  • Question
Sorting a grid list using iframe associated with Google Drive
Replies
0
Views
221
caykamanj1966
caykamanj1966
LyndonOHRC
  • Locked
  • Question
Can I select all child TD's using Parent TR's id?
Replies
5
Views
496
vacunita
vacunita
pendle666
  • Locked
  • Question
Using CSS for the pre tag. white-space: pre-line not working in Chrome
Replies
4
Views
593
pendle666
pendle666
ggriffit
  • Locked
  • Question
Adding a CSS attribute overlay using ::after 1
Replies
8
Views
243
ChrisHirst
ChrisHirst

Part and Inventory Search

Sponsor

Back
Top