Html
Jan 23, 2007 | 10:25 AM
#1
Thread Starter
Contributing Member
Joined: Sep 2002
Posts: 4,749
Likes: 0
From: Santa Clarita, California
HTML Help
Yep, my turn for some help. 
Take a look at the table in the attached image.
It has a COLSPAN=3 row on top and bottom and 3 cells in the middle row.
Inside the left side cell I have a nested table. I want that nested table to take up 100% of the height of the cell it's inside. But it's not.
I know tables don't have a HEIGHT attribute, so I tried using CSS to do that. It didn't work. Any ideas? The top row of that nested table should keep the top gradient image at the top, the bottom row of the table should keep the bottom gradient image at the bottom. The center should expand to whatever height the parent table is (which should be dicated by the image inserted in the center cell, where you see the red X now).
In other words, that green area should be only between the images (not below the bottom one at all), and expandable.
Here's the code I have for that left side cell and the nested table inside
Take a look at the table in the attached image.
It has a COLSPAN=3 row on top and bottom and 3 cells in the middle row.
Inside the left side cell I have a nested table. I want that nested table to take up 100% of the height of the cell it's inside. But it's not.
I know tables don't have a HEIGHT attribute, so I tried using CSS to do that. It didn't work. Any ideas? The top row of that nested table should keep the top gradient image at the top, the bottom row of the table should keep the bottom gradient image at the bottom. The center should expand to whatever height the parent table is (which should be dicated by the image inserted in the center cell, where you see the red X now).
In other words, that green area should be only between the images (not below the bottom one at all), and expandable.
Here's the code I have for that left side cell and the nested table inside
Code:
<TD bgcolor=green> <TABLE BORDER="0" WIDTH="21" CELLSPACING="0" CELLPADDING="0" STYLE="height:100%;"> <TR> <TD HEIGHT="159" CLASS="gallery_frameleft1"></TD> </TR> <TR> <TD STYLE="height:100%;"> </TD> </TR> <TR> <TD VALIGN=BOTTOM HEIGHT="159" CLASS="gallery_frameleft3"></TD> </TR> </TABLE> </TD>
Last edited by calrockx; Jan 23, 2007 at 10:29 AM.
Jan 23, 2007 | 12:45 PM
#3
Thread Starter
Contributing Member
Joined: Sep 2002
Posts: 4,749
Likes: 0
From: Santa Clarita, California
I think
The CSS file isn't necessary to post, the classes I have in there only add background images (the images you see), nothing else.
I tried inserting the images using IMG tags rather than using CSS, same problem.
The entire HTML file isn't necessary, I just need to know how to make a nested table fill up the entire height of that TD cell. The parent table is only other table on the page, it isn't being constrained by anything.
I tried inserting the images using IMG tags rather than using CSS, same problem.
The entire HTML file isn't necessary, I just need to know how to make a nested table fill up the entire height of that TD cell. The parent table is only other table on the page, it isn't being constrained by anything.
Jan 23, 2007 | 01:14 PM
#4
Contributing Member
Joined: Feb 2004
Posts: 1,318
Likes: 0
From: tulsa, OK
hmm, i played with it a little, it seems like ff and ie handle it differently (huuuge surprise there 
)
IE stretches the middle row of your inner table, which i think is what you want?
ff seems to keep that normal height, and the top & bottom are sized as you spec'd in px.
I can post up what i have some place, but i'm not 100% sure i understand how it's supposed to look and behave when done.
edit: Can you just ditch the tables and go with div's & css? another way to hack it would be using javascript to resize the middle td after loading. I assume the pic could change, and that's why you can't just hardcode all the heights for the nested table?
)IE stretches the middle row of your inner table, which i think is what you want?
ff seems to keep that normal height, and the top & bottom are sized as you spec'd in px.
I can post up what i have some place, but i'm not 100% sure i understand how it's supposed to look and behave when done.
edit: Can you just ditch the tables and go with div's & css? another way to hack it would be using javascript to resize the middle td after loading. I assume the pic could change, and that's why you can't just hardcode all the heights for the nested table?
Last edited by tulsa_97SR5; Jan 23, 2007 at 01:58 PM. Reason: more questions
Jan 23, 2007 | 02:07 PM
#5
Registered User
Joined: Dec 2006
Posts: 285
Likes: 0
From: Everett
Ok try something like;
The <table> tag is what sets the height not the row or cell and fixing the other rows above and below will force the center row to take the rest of the height of the screen and will resize as the user resizes the screen.
Which is what I think ^he^ said but phrased differently.
Code:
<table border="0" width="100%" id="table1" height="100%"> <tr> <td colspan="3" width="100%" height="80"> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> </tr> <tr> <td colspan="3" width="100%" height="80"> </td> </tr> </table>
Which is what I think ^he^ said but phrased differently.
Last edited by KD7NAC_07FJ; Jan 23, 2007 at 02:09 PM.
Jan 23, 2007 | 05:44 PM
#6
Thread Starter
Contributing Member
Joined: Sep 2002
Posts: 4,749
Likes: 0
From: Santa Clarita, California
HEIGHT is not a valid attribute to the TABLE tag.
Hm Tulsa, hadn't thought of DIVs, I guess I could try that.
Yeah, I want it to wokr in IE and FF.
I've got it hardcoded for now, I was just hoping to have it be more flexible and adjust automatically.
Hm Tulsa, hadn't thought of DIVs, I guess I could try that.
Yeah, I want it to wokr in IE and FF.
I've got it hardcoded for now, I was just hoping to have it be more flexible and adjust automatically.
Jan 23, 2007 | 06:56 PM
#7
Registered User
Joined: Dec 2002
Posts: 9,048
Likes: 2
From: Seattleish, WA
If you have it hard coded somewhere, can you post a link to a dummy page or a screen shot of what it should look like?
{woo-hoo - post #8000}
Trending Topics
Jan 23, 2007 | 07:47 PM
#8
Thread Starter
Contributing Member
Joined: Sep 2002
Posts: 4,749
Likes: 0
From: Santa Clarita, California
Take a look at the gradient frames around these two big thumbnails
http://statuswheels.com/gallery/showroom.php
That's the effect I'm going for. The frame is built using table cells, and the cell in the middle should be able to hold any size picture, with the frame conforming to it. On the top and bottom, the frame image tiles to it'll stretch to any size. Since the gradient fades on the sides, I have a top and bottom part images, and the middle should be blank to stretch to whatever size.
http://statuswheels.com/gallery/showroom.php
That's the effect I'm going for. The frame is built using table cells, and the cell in the middle should be able to hold any size picture, with the frame conforming to it. On the top and bottom, the frame image tiles to it'll stretch to any size. Since the gradient fades on the sides, I have a top and bottom part images, and the middle should be blank to stretch to whatever size.
Jan 23, 2007 | 08:02 PM
#9
Registered User
Joined: Dec 2002
Posts: 9,048
Likes: 2
From: Seattleish, WA
Hmmm... 'k.
Well, I agree that the HTML 4.01 spec doesn't show HEIGHT as a valid table attr, but they're using them on that example page.
I'll keep playing, but don't hold out hope for me.
Well, I agree that the HTML 4.01 spec doesn't show HEIGHT as a valid table attr, but they're using them on that example page.
I'll keep playing, but don't hold out hope for me.
Jan 23, 2007 | 08:27 PM
#10
Contributing Member
Joined: Nov 2005
Posts: 486
Likes: 0
From: Glendale, CA
I can get something to work, but if you add any DOCTYPE declarations to the page, it breaks it in IE7 because the height=100% thing. here's what I have so far....
and that's a damn nice truck if i do say so myself.
Code:
<html>
<style type="text/css">
body { background-color: black; }
</style>
<body>
<table border="0" cellpadding="0" cellspacing="0">
<!-- Top Row -->
<tr>
<td><img src="http://statuswheels.com/gallery/images/frame/topleft.gif"></td>
<td style="background-image: url(http://statuswheels.com/gallery/images/frame/top.gif);height: 100%"></td>
<td><img src="http://statuswheels.com/gallery/images/frame/topright.gif"></td>
</tr>
<!-- Middle Row -->
<tr>
<td style="height: 100%">
<table border="0" cellpadding="0" cellspacing="0" height="100%">
<tr>
<td><img src="http://statuswheels.com/gallery/images/frame/left_01.gif"></td>
</tr>
<tr>
<td style="background-image: url(http://statuswheels.com/gallery/images/frame/left_02.gif); height: 100%">
</tr>
<tr>
<td><img src="http://statuswheels.com/gallery/images/frame/left_03.gif"></td>
</tr>
</table>
</td>
<td><img src="http://www.geocities.com/jsnbyh/yotatech_images/Picture_146.jpg"></td>
<td style="height: 100%">
<table border="0" cellpadding="0" cellspacing="0" height="100%">
<tr>
<td><img src="http://statuswheels.com/gallery/images/frame/right_01.gif"></td>
</tr>
<tr>
<td style="background-image: url(http://statuswheels.com/gallery/images/frame/right_02.gif); height: 100%">
</tr>
<tr>
<td><img src="http://statuswheels.com/gallery/images/frame/right_03.gif"></td>
</tr>
</table>
</td>
</tr>
<!-- Bottom Row -->
<tr>
<td><img src="http://statuswheels.com/gallery/images/frame/bottomleft.gif"></td>
<td style="background-image: url(http://statuswheels.com/gallery/images/frame/bottom.gif); height: 100%"></td>
<td><img src="http://statuswheels.com/gallery/images/frame/bottomright.gif"></td>
</tr>
</table>
</body>
</html>
Jan 23, 2007 | 09:56 PM
#12
Registered User
Joined: Dec 2006
Posts: 285
Likes: 0
From: Everett
But whatever - have fun.
Jan 23, 2007 | 10:04 PM
#13
Thread Starter
Contributing Member
Joined: Sep 2002
Posts: 4,749
Likes: 0
From: Santa Clarita, California
(fine, i'll prove it - http://apptools.com/examples/tableheight.php)
anyway, thanks jsnby.
i'm gonna check back with this and tacke it some more tomorrow.
Jan 24, 2007 | 04:35 AM
#14
Registered User
Joined: Dec 2006
Posts: 285
Likes: 0
From: Everett
Not trying to start an argument but I've been writing html among other languages for 15+ years for just about all browsers and there is what works and what doesn't, what is documented and then there are "undocumented enhancements".
There is also people's opinon and there is http://www.w3.org/ which is the accepted defacto standard for HTML and neither capture everything any browser can do.
I'm just offering some advice, you can choose to take it or not. It doesn't matter much to me.
I've checked this in IE, Firefox/Mozilla & Opera and they all work.
Not everything you read on the net is fact. That is the first thing you need to keep in mind.
There is also people's opinon and there is http://www.w3.org/ which is the accepted defacto standard for HTML and neither capture everything any browser can do.
I'm just offering some advice, you can choose to take it or not. It doesn't matter much to me.
I've checked this in IE, Firefox/Mozilla & Opera and they all work.
Code:
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1252"> <title>New Page 1</title> </head> <body> <table border="0" width="100%" id="table1" height="100%"> <tr> <td colspan="3" width="100%" height="80"> </td> </tr> <tr> <td> </td> <td> </td> <td> <img border="0" src="http://www.google.com/intl/en_ALL/images/logo.gif" width="276" height="110" align="right"></td> </tr> <tr> <td colspan="3" width="100%" height="80"> </td> </tr> </table> </body> </html>
Last edited by KD7NAC_07FJ; Jan 24, 2007 at 07:41 AM.
Thread
Thread Starter
Forum
Replies
Last Post
kawazx636
The Classifieds GraveYard
34
Oct 6, 2021 03:03 PM
FS[International]: 4runner rear bumper plastic pieces
crashburnoveride
Misc Stuff (Vehicle Related)
3
May 28, 2016 09:08 AM
live4soccer7
84-85 Trucks & 4Runners
3
May 11, 2016 06:52 PM
SpookyMulder
86-95 Trucks & 4Runners
10
Nov 4, 2015 11:56 AM
