HTML - Table Height - 100% ?

Hello

I'm building a website for someone and because I built the website in a way that if the browser window width becomes smaller, the width of the content on the page becomes smaller as well, so the page's height increases. Normally, using height="100%" inside a image tag would work to get the image height to be the same as the height of the page, but because of some scripts I've had to use, that only seems to set the height of the image to its original size. Also, I can't use the CSS equivalent either, that still doesn't do the trick.

So I was wondering if there is an alternative to the height property that I could use.

By the way, the image is inside a table if that helps at all.

Thanks

Drider

I have just started using strict XHTML instead of HTML (because it makes my drop-down menus work in all browsers). But now all table rows that contain images using image tags are too high. Look here, where I have used background colors to show row heights:
http://colatinaexit.com/index1.shtml
This is a stripped-down page that I am using to try to figure this out. But I'm missing something (I just don't know what).
Look at the rows under the main image. The first row has no image tag and a partial green background color. It uses a CSS class and a background image for the corner. The second row is identical. Notice that the heights are correct and they are aligned right next to each other vertically.
Now look at the 3rd row. It contains several image tags and the partial blue background color shows that it is too high. It is defined as 10 high, all the images are defined as 10 high (and, in fact, they ARE 10 pixels high).
Look at the 4th row (partial green background). No image tags, no CSS. and the height is right.
The 5th row? Partial blue background color. It has an image tag, plus a CSS class that defines its height as 10px, and no background image. Too high overall.
I've tried all the combinations I can think of. And every combination that includes an image tag is too high. Why? What am I missing?

BTW, I know that I should be using only CSS and div tags, but I have an older version of Dreamweaver and it doesn't do WYSIWYG for CSS very well. So it would be really helpful for me to understand why table rows with images are overly high.

Thanks,
Paul

Hi,

Please review the following code and give me your thoughts...

HTML Code:

<table width="500" border="1"><tr>
<td width="200"><p>This</p><p>is</p><p>very</p><p>very</p><p>very</p><p>LONG</p><p>text</p></td>

<td width="300" height ="100%" valign="top">
<table width="300" height ="100%" border="1" cellspacing="0">
<tr><td width="300" valign="top">This should be at the TOP</td></tr>
<tr><td width="300" valign="bottom">This should be at the BOTTOM</td></tr>
</table>
</td>

See the attachment for what I am trying to achieve...

The thing to focus on is the second column and how it has 2 rows which are trying to stretch to fill the height of the single row first column. It works in Firefox 3.6 but not at all in IE8.

Any ideas? And please don't talk me out of tables for this thread... I know they aren't the greatest thing ever, I'm just trying to fix what I have.

Thanks!
- Jeff

Hi Everyone:

I'm having difficulty getting a table row height of "1" to display as only one pixel in height. Please see the attached files for reference. The JPG is what I want it to look like, and the index.txt file is the HTML I've currently setup that is not working.

The table should have four white strips. On the right side, this is above and below the large black box, as well as under the green box. On the left side, this is between the light green box and the slightly darker green box. As you can see, all of these white strips appear to be larger than one pixel in height, and I'm not understanding why.

Can anyone please explain to me why this is occurring, and what I can do to fix it? Also, once fixed, will I be able to merge cells of the same color (i.e make the big black box one merged cell, the below green box one merged cell, etc...)?

Any help will be greatly appreciated. Thanks!

Philip

Hi,

First, please excuse me if this has been answered before. I wasn't able to find any similar posts that has a solution and thus I'm making this new thread.

What I have is a simple table with two sections just like this:

Code:

<table>
  <tr>
        <td width='50%' valign='top'> Content goes here... </td>
        <td width='50%' valign='top'> Content 2 goes here... </td>
 </tr>
</table>

Inside those two sections I have a fieldset in each of them (yes, I know this might sound weird, but that's how I need it to be).

The question is, how can I make the height of both <td> (or alternatively the fieldset value) to be equal, in a situation when the data is a dynamical one and I don't know its size initially. It looks ugly if one of the rows is longer than the other and I would like to justify them in some way.

I tried setting height attribute but to no avail. Any thoughts how this can be achieved?

Thank you in advance for your help!

Hello

I have a very annoying problem:

I have a table inside a td and I want the table the strech its height to the height of the <td> , but somehow I can't do it...

<td valign="top" style="width:14px; border:solid 1px black;">
<table cellpadding="0" cellspacing="0" border="1" style="width:100%; height:100%; min-height:100%; max-height:100%" >
<tr>
<td class="CommonSeperetorUp" >

</td>
</tr>
<tr>
<td class="CommonSeperetorMiddle" >

</td>
</tr>
<tr>
<td class="CommonSeperetorDown" >

</td>
</tr>
</table>
</td>



int the class "CommonSeperetorMiddle" I set the height to 100% ...

anyone?

I'm using the following code to display a table with three columns. The first and third column each have a background image, so that these graphics will appear behind any text. The middle column does not have a background image. Instead, it has three images stacked on top of each other, whose combined height equal the height of the background images on the left and right (30+83+81=194). The table and three cells are given the same dimensions as their contents or background images.

Code:

<table border="0" cellpadding="0" cellspacing="0" width="584" height="194">
<tr>

<td width="239" height="194" align="left" valign="middle" background="left.png">
START
</td>

<td width="117" height="194">
<img width="117" height="30" src="middle-top.png" border="0" /><br />
<img width="117" height="83" src="middle-middle.png" border="0" /><br />
<img width="117" height="81" src="middle-bottom.png" border="0" />
</td>

<td width="228" height="194" align="right" valign="middle" background="right.png">
END
</td>

</tr>
</table>

In IE8 this seems to work fine, as it does in Firefox and Chrome. However, in IE7, I get this:



You can see that the background begins to repeat at the bottom of the left and right columns, indicating that the table is higher than the dimension specified. Why is this? How can I fix it (without ruining the display in other browsers/versions)?

Any suggestions much appreciated!

Hi,

My site is here

I am having problems with the left side. It looks how I want it in Firefox but in IE it is ignoring my height commands and centering all the rows across the whole table.

Anyone know how I can get this to look the same in Firefox and IE?

Bit of a numpty so please be gentle

Thanks

Jon

Hi guys,

First of all I'm a newbie at web coding and such... Using dreamweaver I managed to create a simple web design, Exactly as I wanted it.

Now my only problem lies with the table and the iframe within it, Is it possible for the table to depend on the iframe's height and increase accordingly? (auto increase height and fill the whole frame page without scrolling inside the frame)

Here is the code, maybe I did something wrong...

<style type="text/css">
body {
margin-top: 0px;
}
</style>
<body bgcolor="#c7c7c7"><table width="1020" height="100%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<th width="20" height="100%" rowspan="3" scope="col"><img src="bgleft3.jpg" width="20" height="100%" /></th>
<th width="980" height="277" background="Mainbanner.jpg" scope="col"></th>
<th width="20" height="100%" rowspan="3" scope="col"><img src="bgright3.jpg" width="20" height="100%" /></th>
</tr>
<tr>
<th width="980" height="51" background="Barnew.jpg" scope="col"></th>
</tr>
<tr>
<td width="980" height="100%" bgcolor="#3e5d75"><iframe src="frame_new.html" width="100%" height="100%" frameborder="0" scrolling="no"></iframe>
</td>
</tr>
<tr>
<th width="20" height="46" background="BottomLeft.jpg" scope="col"></th>
<th width="980" height="46" background="BottomNew.jpg" scope="col"></th>
<th width="20" height="46" background="BottomRight.jpg" scope="col"></th>
</tr>
</table>
</body>



Thanks in advance.

(Already tried google and searched the forums, didnt find anything)

Hi I have made 2 tables for my home page for content of pages.

Each table is two rows

The problem is the right column in each table is not height alligned to the left column because there is a uneven amount of links

How do I get the right columns to come up heigher and be height alligned because it looks messy?

I spent hours looking at all different web pages about tables and could not find this.

Does anyone know???????????? Please Help me

check it out Here on this page.
[url="http://www.great-quotes-powerful-minds.com/"]

http://www.great-quotes-powerful-minds.com/

I start with
<table width="100%">
<tr><td>
put links column1
</td>
<td>
put links for column2
</font>
</tr> </table>


Please Help

Hi there

I am trying to make a template whereby the whole table fills 100% height of the browser window. My problem is, is that i have a nested table containing 2 rows and 2 tds. The first row and td needs to be aligned to the top and the 2nd needs to align to the bottom - and to the bottom of the browser window.

This is my code so far:

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Homepage</title>
<style type="text/css" media="all">
body {
margin:0;
padding:0;
height:100%;
}
table {
border-collapse:collapse;
border-spacing:0;
}
td {
margin:0;
padding:0;
}
html {
height:100%;
}
</style>
</head>

<body >
<table width="100%" cellpadding="0" cellspacing="0" style="height:100%;">
<tr>
<td width="50%" style="background-image:url(leftheader_image.gif); background-repeat:repeat-x; background-position:top right;"></td>
<td width="980" height="244" style="background-image:url(header_image.jpg); background-repeat:no-repeat; background-position:top left; vertical-align:top;"><img src="spacer.gif" width="980" height="1" alt="" /></td>
<td width="50%" style="background-image:url(rightheader_image.gif); background-repeat:repeat-x; background-position:top left;"></td>
</tr>
<tr>
<td width="50%" style="background-image:url(leftbody_image.jpg); background-repeat:repeat-x; background-position:top right; background-color:#fbefd5; vertical-align:bottom;" ><table width="100%" cellpadding="0" cellspacing="0">
<tr>
<td width="50%" height="119" style="background-image:url(leftgrass_image.gif); background-repeat:repeat; background-position:top right; vertical-align:bottom;"></td>
</tr>
</table></td>
<td width="980" bgcolor="#fbefd5" style="background-image:url(body_image.jpg); background-repeat:repeat-x; background-position:top left; background-color:#fbefd5; height:100%; vertical-align:top;"><table width="100%" style="height:100%" cellpadding="0" cellspacing="0">
<tr>
<td valign="top"><p>content</p></td>
</tr>
<tr><br />
<td width="980" height="118" style="vertical-align:bottom; background-image:url(grass_image.gif); background-position:top left; background-repeat:repeat-x;">&nbsp;
</td>
</tr>
</table></td>
<td width="50%" style="background-image:url(rightbody_image.jpg); background-repeat:repeat-x; background-position:top left; vertical-align:bottom; background-color:#fbefd5; "><table width="100%">
<tr>
<td width="50%" height="118" style="background-image:url(rightgrass_image.gif); background-repeat:repeat; background-position:top left; "></td>
</tr>
</table></td>
</tr>
</tr>
</table>
</body>
</html>

What i need is for the left grass image, the grass image and the right grass image all aligned to the bottom of the browser window, but all these images need to be set as backgrounds as i need the left and the right to repeat on the x and footer links will be overlayed to the grass image in the middle.

The result i am getting at the moment is IE7 displays 100% further than the height of the browser window, resulting in a scroll and the grass image does not align to the bottom along with the left and right grass. This is near the top directly beneath the content td.

In Firefox, all images are aligned to the bottom, but the grass image is pushed further down than the left and right and so is not lined correctly, resulting in a slight scroll. The left and right grass images are aligned at the bottom of the browser window, before needing to scroll to see the rest of the middle grass.

I know that's a lot to take in, does it make sense?

Thanks in advance.

Hello,

I've recently noticed that IE renders this table a bit differently than most browsers (Firefox, Opera, Safari, etc). The real page is much more complicated and uses proper styling, but I simplified it into the code below. The inline CSS sets the height of each individual cell and then the last cell is not provided with a height. I would love for the last cell to take the rest of the available height. I've tried many things to try and get this to work (like setting the height to 100%). The page renders how I expect it to in every browser I've tested except for the IE series. It seems as though Internet Explorer decides to ignore my row heights and calculate its own for some reason. Also, using a fixed height for the last cell is not possible due to how dynamic the web page is. Does anyone have any tips?

HTML Code:

<table style="table-layout:fixed;" border=1 width=100%>
	<tr>
		<td style="height:17px;width:150px;">&nbsp;</td>
		<td style="height:600px" colspan=3 rowspan=5>This should span all of the rows and the remaining columns</td>
	</tr>
	<tr>
		<td style="height:17px;width:150px;">&nbsp;</td>
	</tr>
	<tr>
		<td style="height:17px;width:150px;">&nbsp;</td>
	</tr>
	<tr>
		<td style="height:17px;width:150px;">&nbsp;</td>
	</tr>
	<tr>
		<td>This cell should take the rest of the available column height area</td>
	</tr>
</table>

Thank you.

Hello,

This is either a really easy question, or it just can't be done. I've tried it before, and could have sworn I've worked it out, but I can't do it again.

I have a table with cells as below:


What I want is Cell #2 to be Fixed and Cell #5 to be fixed in height. When Cell #3 expands, I only want Cell #4 to expand with it. So when #3 is 300px and #2 and #5 are 100px, then #4 should be 100px. But when if #3 expands to 400 px, then #2 and #5 should stay at 200px and #4 should expand to 200px. But this is not the case, atleast in IE.
In Firefox, #2 and #5 stay how they are supposed to and #4 expands (yay!), but in IE, all three go haywire. I can't even find any consistancy in how IE determines which cell to expand and how much.

I've created a test HTML file to see if I can get it working, and I still cannot. I have it available if anyone would like to see it and fiddle around with it.

HTML Link (viewable):
Table Test
Zip File (includes html and ruler.gif Background):
Table Test Zip

As you can see, I have #2's height set to 100px and #5's height set to 50px. #4 has no height set. #3's is 300px. What I want is #4's then to be 150px (300 - 100 - 50 = 150). However, the case as it may be is that it just does not work out this way. How can I accomplish this. It must be possible.

Note that the HTML contains CSS to determine the dimensions, but I have also tried it directly into the TD tags. I've also tried defining height directly in the TR and through a TR style as well as a ton of combinations of CSS postiioning and heights and floats and all kinds of stuff. I feel like I've tried everything.

Any help appreciated.
Thanks agin,
Rege

Hi,

I spent five and a half hours attempting to resolve this problem, but now I'm hoping that someone might be able to help me.

If you visit http://www.justforyouwebsite.com/, you'll see that the menu tables on the left and right sidebars are meant to have shadows. The shadows are created by using 3x3 tables, with the right and bottom sides of the tables containing repeating background images.

Unfortunately, however, the size of the table cells on the right isn't correct. The top-right cell should be 7 pixels high, with the middle right cell filling the space between the top right and bottom right cells. As it is now, the top right cell and the middle right cell appear to be split evenly, and no matter what style or HTML changes I make, there is no way to get the shadow to repeat all the way up the right side of the table.

Does anyone have any ideas? The Smarty template code is below in case it might help someone, although I don't see how this could be a scripting problem.

Code:

<table cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td colspan="2" rowspan="2">

<table cellspacing="1" width="100%" class="VertMenuBorder">
<tr>
<td class="VertMenuTitle">
<table cellspacing="0" cellpadding="0" width="100%"><tr>
<td>{$link_begin}<img src="{$ImagesDir}/{if $dingbats ne ''}{$dingbats}{else}spacer.gif{/if}" class="VertMenuTitleIcon" alt="{$menu_title|escape}" />{$link_end}</td>
<td width="100%">{if $link_href}<a href="{$link_href}">{/if}<font class="VertMenuTitle">{$menu_title}</font>{if $link_href}</a>{/if}</td>
</tr></table>
</td>
</tr>
<tr> 
<td class="VertMenuBox">
<table cellpadding="{$cellpadding|default:"5"}" cellspacing="0" width="100%">
<tr><td>{$menu_content}<br /></td></tr>
</table>
</td></tr>
</table>

</td>
<td class="TabTopRight" height="7px"><div class="DivTabTopRight" height="7px">&nbsp;</div></td>
</tr>

<tr>
<td class="TabRight" height="100%"><div class="DivTabRight">&nbsp;</div></td>
</tr>
<tr>
<td class="TabBottomLeft"><div class="DivTabBottomLeft">&nbsp;</div></td>
<td class="TabBottom"><div class="DivTabBottom">&nbsp;</div></td>
<td class="TabBottomRight"><div class="DivTabBottomRight">&nbsp;</div></td>
</tr>
</table>

Thanks,

-Steve

Hello Gurus,

I have a webpage with two tables in it. I need to have both table of same identical height(65px) however the issue is, that one table ends up being larger than other one. no matter what I try it does not stay at 65px height.

Pleaes help. Below is the code snippet Thanks, Ruchir
---------
<html xmlns="http://www.w3.org/1999/xhtml">

<!-- start page -->

<div id="page">
<div id="pagebg">
<div id="content">
<div class="post">

<br></br>

</div>
<!-- start content -->

<!-- DIV CONTENT -->
<head>

<style
type="text/css">

/*
Design by Free CSS Templates
http://www.freecsstemplates.org
Released for free under a Creative Commons Attribution 2.5 License
*/

body {
/*background: #A17461 url(images/img01.jpg) repeat-x;*/
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
color: #B1C0C7;
}

/*ol {

list-style-position: inside;
}*/

blockquote {

border-left: 1px solid #9E9D89;
}

a {
color: #FFFFFF;
}

a:hover {
text-decoration: none;
}

/* Content */

.link:visited
{
font-family: Georgia,Arial,Verdana;
vertical-align:top;
color:rgb(0,82,82);
text-align:auto;
text-decoration:none;
vertical-align: top;


}
.link:hover
{
font-family: Georgia, Arial,Verdana;
vertical-align:top;
color:rgb(0,148,231);
text-align:auto;
text-decoration:underline;
vertical-align: top;


}
.link {
font-family: Georgia, Arial,Verdana;
vertical-align:top;
color:Gray;
text-align:auto;
text-decoration:none;


</style>

<body>
<div style="margin-left:0%">
<table style="margin-left:0%">
<tr>
<td>
<!--First Panel -->
<div style="font-size:9pt;font-family:Georgia; color:Navy; width:290px; background-image:url(images/gray-gradient.gif); background-repeat:repeat;">label</div>
<div>
<table cellspacing="0" cellpadding="0" width="290px" height="65px" bgcolor="#fgfgfg" align="left">
<tr align ="left" width="290px" >
<td align ="left">
<ul class="link" type="none" style="font-size:8pt;font-family:Arial;">
<li class="link"> <a style="font-size:8pt;font-family:Arial;" class="link" href="http://www.coexsys.com/erpoffering.html" id="l16">Offerings</a> </li>
<li class="link"> <a style="font-size:8pt;font-family:Arial;" class="link" href="http://www.coexsys.com/id145.html" id="l18">Request More Information</a> </li>
</ul>
</ul>
</td>

<td align ="left">
<ul class="link" type="none" style="font-size:8pt;font-family:Arial;">
<li class="link"> <a style="font-size:8pt;font-family:Arial;" class="link" href="mailto:sales@coexsys.com" id="l17">Email us</a> </li>
<li class="link"> <a style="font-size:8pt;font-family:Arial;" class="link" href="http://www.coexsys.com/id144.html" id="l18">Contact us</a> </li>
</ul>
</td>

</tr>
</table>

</div>

</td>
<td>
<!--2-->
<div style="font-size:9pt;font-family:Georgia; color:Navy; width:290px; background-image:url(images/gray-gradient.gif); background-repeat:repeat;">label2</div>
<div>
<table cellspacing="0" cellpadding="15" width="290px" height="65px" bgcolor="#fgfgfg" align="left">
<tr align ="left" width="290px" >
<td align ="left">
<ul class="link" type="none" style="font-size:8pt;font-family:Arial;">
<li class="link"> <a style="font-size:8pt;font-family:Arial;" class="link" href="http://www.coexsys.com/managedservices.html" id="l16">Offerings</a> </li>
<li class="link"> <a style="font-size:8pt;font-family:Arial;" class="link" href="http://www.coexsys.com/rfims.html" id="l18">Request More Information</a> </li>
</ul>
</ul>
</td>

<td align ="left">
<ul class="link" type="none" style="font-size:8pt;font-family:Arial;">
<li class="link"> <a style="font-size:8pt;font-family:Arial;" class="link" href="mailto:sales@coexsys.com" id="l17">Email us</a> </li>
<li class="link"> <a style="font-size:8pt;font-family:Arial;" class="link" href="http://www.coexsys.com/id144.html" id="l18">Contact us</a> </li>
</ul>
</td>

</tr>
</table>

</div>
</td>
</tr>
</table>
<!--aaa-->
</div>
</head>


</div> <!--content-->
<!-- end content -->
<!-- start sidebar -->
<div style="clear: both;">&nbsp;</div>
</div>
</div>
<!-- end page -->
<!-- start footer

<!-- end footer -->
</body>
</html>