DaniWeb IT Discussion Community
Page 1 of 2 1 2 >
Show 40 post(s) from this thread on one page

DaniWeb IT Discussion Community (http://www.daniweb.com/forums/)
-   JavaScript / DHTML / AJAX (http://www.daniweb.com/forums/forum117.html)
-   -   how to maximize table cell height (http://www.daniweb.com/forums/thread120319.html)

boyetp Apr 21st, 2008 8:25 pm
how to maximize table cell height
 
Hi there,

I'm new to this forum. I need help on how to maximize a table cell height.
First I have a table layout that has 3 rows, the first and third rows have fix 50px height.
I want to max the height of the of the 2nd row to fill the remaining space.

This works fine in firefox 2 but not in IE7. the height 100% in the ie 7 causes to overlap the body which cause to create a vertical scroll bar.

how should I do this. what would be the proper value for the 2nd row? I need help.

Also if you put a nested table in the 2nd row without row height define, the 100% height table won't stretch.

here's the code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>Untitled Document</title>

</head>

<style>

html, body{

        height:96%;

}

                

body{

        border: 1px solid red;

}

</style>



<body>

<table border="1" cellspacing="5" cellpadding="5" style="height:100%; width:100%">

<tr>

<td style="width:100%;height:50px"> row 1 col 1</td> 

</tr>

<tr>

<td style="width:100%;height:100%"> row 2 col 1</td> 

</tr>

<tr>

<td style="width:100%;height:50px"> row 3 col 1</td> 

</tr>

</table>                

                

</body>

</html>

regards,

boyetp

Traicey Apr 22nd, 2008 4:31 am
Re: how to maximize table cell height
 
Quote:
the height 100% in the ie 7 causes to overlap the body which cause to create a vertical scroll bar.

Im not sure if I get what you are trying to say but to eliminate the verical scroll bar you can rotate the height of the body until it suits your needs. you can achieve that by decreasing the body height 

<style>

html, body

{

height:50%;

}

aravelli Apr 22nd, 2008 5:12 am
Re: how to maximize table cell height
 
don't use height:100%
<td style="width:100%;height:100%"> row 2 col 1</td>
use height:100px
<td style="width:100%;height:100px"> row 2 col 1</td>
and find the difference

boyetp Apr 22nd, 2008 12:56 pm
Re: how to maximize table cell height
 
Quote:
Originally Posted by Traicey (Post 590471)
Im not sure if I get what you are trying to say but to eliminate the verical scroll bar you can rotate the height of the body until it suits your needs. you can achieve that by decreasing the body height 

<style>

html, body

{

height:50%;

}


Hi Traicey,

I really appreciate your replay. I already tried different percentage, the latter table is a layout and they are dynamically created based on how many gadgets/widgets that I'm going to put base on our xml cofiguration. This table can have tables inside the td.

So the table inside the table won't stretch through the length of the td.
Actually if I used quirks mode works fine but I don't want to go that route.

I really need help on this.

boyetp

boyetp Apr 22nd, 2008 12:59 pm
Re: how to maximize table cell height
 
Quote:
Originally Posted by aravelli (Post 590508)
don't use height:100%
<td style="width:100%;height:100%"> row 2 col 1</td>
use height:100px
<td style="width:100%;height:100px"> row 2 col 1</td>
and find the difference


Hi Arevelli,

I have to stretch this cell to fill up the remaining spaces.
This table can have tables inside the td.
So the table inside the table won't stretch through the length of the td.

regards,

boyetp

peter_budo Apr 24th, 2008 7:50 pm
Re: how to maximize table cell height
 
Why do you have CSS outside of head tag? It should be inside header tag or use inline option (inside the tag you wish to adjust with css)

boyetp Apr 24th, 2008 11:33 pm
Re: how to maximize table cell height
 
Quote:
Originally Posted by peter_budo (Post 592612)
Why do you have CSS outside of head tag? It should be inside header tag or use inline option (inside the tag you wish to adjust with css)


Hi Peter,

I can move the styles into the header or use inline style with the same result.
This is just my test page.

boyetp

aravelli Apr 29th, 2008 4:26 am
Re: how to maximize table cell height
 
use this

html, body{

        height:auto;

        }

instead of using height:96%;

boyetp Apr 29th, 2008 12:45 pm
Re: how to maximize table cell height
 
Quote:
Originally Posted by aravelli (Post 595491)
use this

html, body{
height:auto;
}

instead of using height:96%;


This is the default value of the height. Then my table won't maximize the screen viewport.
I need to have my table maximize the viewport screen.

MidiMagic May 2nd, 2008 1:35 am
Re: how to maximize table cell height
 
There is NO way to exactly fill a screen vertically that works on all browsers, screen resolutions, and viewport sizes.

- It's impossible to make a page that fits perfectly in the vertical direction on all monitors.

- It is impossible to place anything against the bottom edge of the screen.

The Internet is not designed to work that way. It is designed to expand pages downward as much as is necessary to fit the entire content served. Screen height and the bottom edge of the screen are undefined in Internet protocols.

You can choose among these possibilities:

1. Design your page for one screen resolution, and accept the fact that people with other screen resolutions are going to see either scroll bars or a smaller page in the upper left corner.

2. Design your page for the lowest resolution, and let the remainder of the screen be blank if a higher resolution monitor displays it.

3. Design your page to fit against the top of the screen, and expand to fit the width (which does work). Use a repeating background image to fill the rest of the screen downward.

4. You could try to wrestle with JavaScript functions intended to find the screen height. But they are not standardized across browsers, and are totally undefined on many browsers.

5. You could create an image containing the entire page, and then choose a display that fits the image to the window horizontally. It will then approximately fit vertically. But it won't work right on the new widescreen monitors. And you can't have any links on this page.


All times are GMT -4. The time now is 2:26 am.
Page 1 of 2 1 2 >
Show 40 post(s) from this thread on one page

Forum system based on vBulletin Copyright ©2000 - 2008, Jelsoft Enterprises Ltd.
©2003 - 2008 DaniWeb® LLC