CSS - One Table Inheriting The Height Of Another?

Currently, my site is setup like this:

Code:

#wrapper {
	margin: 0 auto 15px auto;
	width: 900px;
	border: solid 1px #999;
	border-width: 0 1px 1px 1px;
	overflow: hidden;
	background: #fff

#left { 
	float: left;
	width: 200px;
	margin: 0;
	font-size: 75%;
	}

#right {
	float: left;
	width: 698px;
	margin: 0;
	font-size: 80%;
	}

Now I know that I didn't define a background for the #left or #right div, but that is because that is a direct copy and paste of how I currently have it setup since even if I do insert a background color they don't apply. The wrapper's white background seems to overwrite a defined background for the #left and #right. The issue is that the #left is my navigation to which I've colored dark gray (#999). I don't mind if the #right stays white because that is where I place the content of the site.

The issue here is when the navigation ends in #left it shows the white beneath the links, which is ugly. I'd like for the dark gray to extend the length of the page filling in the width of the column. I thought I found a "workaround" but not really. I set the wrapper background to #999 which works great when the content on the #right is longer than the navigation inside the #left, but when the #right is shorter the column ends significantly shorter in length and then shows the #999 color beneath where the content ends.

I've even tried defining no background in the wrapper (which wouldn't be good anyhow because my body background is a gradient) and even then the #left and #right divs wouldn't take a background color.

Help please!

Thanks in advance,
Michael

Hi all,

I am recreating some nav links. Instead of having them be text, I am converting them to images. 3 images per link: regular, hover, visited.

The test page is here

You will see "Home" That is an image. The other 3 haven't been messed with yet and are still text.

Here's my problem. As I said, The link itself will just be an image. When hovered over, it will go to the same image, just a different colored one. After clicked, it will display a third image instead, once again a different color.

BUT, elsewhere in my CSS I have a section where visited links are set to turn black, and I think THAT'S what causing the home image to disappear after visited.

Could ya'll have a look at my source and CSS and tell me what you think I can do to fix this?

CSS file is here

Thanks!

Chris

I've seen this posted before but none of the fixes seem to help.

I am using a header table a body table and a footer table.

I need the footer to always be at the bottom, and the body table to expand to meet the footer eeven if there is not enough content to push it down.

I've managed to force the footer to the bootom fine.

The auto expanding body is another issue.

here is my syle sheet:
BODY {
margin-top: 0em;
margin-right: 0em;
margin-bottom: 0em;
margin-left: 0em;
}

#container {
position: relative;
min-height: 100%;
}

#content {
position: relative;
height: 100%;
}

#footer {
position: absolute;
bottom: 0;
}


Here is my page code:

<div id="container">

table width="200" border="1" id="header">
<tr>
<td bgcolor="Fuchsia">x</td>
</tr>
</table>


<table width="200" border="1" id="content">
<tr>
<td bgcolor="Aqua">y</td>
</tr>
</table>


<table width="200" border="1" id="footer">
<tr>
<td bgcolor="Blue">z</td>
</tr>
</table>

</div>


Using table height=100% for the body table works fine in IE, but it busts in Netscape and Mozilla. I know I shouldn't be using tables for layout, but hey...

the ideal.gif is what I'm looking for, however the code above creates current.gif. the "height: 100%;" in the content div forces it to expand to 100%(the view-window's size) and not just 100% of the remaining space.

Any help greatly appreciated.

Hi there,

I would like to give a table a minimum height, since there is a nice command in CSS for this, i tried it, but it doesn't work.

Does anyone know how to use this min-height command?

Does it only work on DIV or SPAN, what are the restrictions and is it a supported command in mozilla FF and IE?

Regards,

Sander

Righto, this should be easy. I want to set the height of a table. I'd rather do it in CSS but i'll use inline stuff if I have to.

Here's my attempt, I'm pretty confused about why this doesn't work.

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
</HEAD>
<BODY>
	<table height='20px' border=1 style="overflow: auto; height: 20px;">
		<tr>
			<td>Quite a big Val 11</td>
			<td>62</td>
			<td>Val 13</td>
		</tr>
		<tr>
			<td class='test'>This cell has a class</td>
			<td>22</td>
			<td>23</td>
		</tr>
		<tr>
			<td>Val 11</td>
			<td>12</td>
			<td>Val 13</td>
		</tr>
	</table>
</BODY>
</HTML>

I have a table and have specified the width successfully but cannot figure out how to make the overall minimum height of the table 100% of the window/frame height. Any way to do this? It seems like I've done it before but can't remember.

Thanks in advance.

I've set PHP Code:
 html, body { height: 100%; } 



and PHP Code:
.fullheight { height: 100%; } 





I've also set in the html, body all margins to a value of "0"

What results is, the table I'm applying .fullheight to extends beyond the bottom of the page about 50 pixels or so when it should've stopped growing when it hit the bottom edge of the viewable area in both NS and IE.

Any ideas? Suggestions?

I noticed that in Firefox, setting the height to 100% in the style tag attribute, does not work.

See code below:
Code:

<?xml version="1.0" encoding="utf-8"?>
<!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" xml:lang="en" lang="en">
<head>
<title>Table Height</title>
<style type="text/css">
.wrapper {
  min-height: 100%;
  max-height: 100%;
  height: auto !important;
  height: 100%;
  overflow: auto;
}
#divider {
	cursor: e-resize;
	width: 8px;;
	background-color: #444444;
	vertical-align: center;
	min-height: 100%;
	max-height: 100%;
	height: auto !important;
  	height: 100%;
}
</style>
<script type="text/javascript">
<!--
//global variables used to track status
var curWidth=0
var curPos=0
var newPos=0
var mouseStatus='up'

//this function gets the original div height
function setPos(e){
	//for handling events in ie vs. w3c
	curevent = (typeof event == 'undefined' ? e:event);
	//sets mouse flag as down
	mouseStatus = 'down';
	//gets position of click
	curPos = curevent.clientX;
	//accepts height of the div
	tempWidth = document.getElementById('leftMenu').style.width;
	//these lines split the width value from the 'px' units
	widthArray = tempWidth.split('px');
	curWidth = parseInt(widthArray[0]);
}

//this changes the height of the div while the mouse button is depressed
function getPos(e){
	if(mouseStatus=='down'){
		curevent = (typeof event == 'undefined' ? e:event);
		//get new mouse position
		newPos = curevent.clientX;
		//calculate movement in pixels
		var pxMove=parseInt(newPos-curPos);
		//determine new width
		var newWidth = parseInt(curWidth+pxMove);
		//conditional to set minimum width to 5
		newWidth = (newWidth < 10 ? 10:newWidth);
		//set the new width of the div
		document.getElementById('leftMenu').style.width = newWidth+'px';
	}
}

function toggleMenu(e) {
	e.stopPropagation();
	if (document.getElementById('leftMenu').style.display != 'none') {
		document.getElementById('leftMenu').style.display = 'none';
	} else {
		document.getElementById('leftMenu').style.display = '';
	}
}

//-->
</script>
</head>

<body style="margin: 0; width: 100%; height: 100% !important;" onmousemove="getPos(event)" onmouseup="mouseStatus='up'">
<table cellspacing="0" style="width: 100%; height: 100%;">
  <tr valign="top">
    <td id="leftMenu" style="width: 230px;">
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit amet felis. Integer sit amet diam. Phasellus ultrices viverra velit.</p>
    </td>
    <td id="divider" onmousedown="setPos(event)"><a href="javascript:void(0);" onclick="toggleMenu(event);" style="color:white;"><></a></td>
    <td id="mainContent">
      <div class="wrapper">
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras quis nisl in lectus consectetuer ornare. Phasellus mi lectus, laoreet nec, bibendum eget, posuere sit amet, urna. Sed ut sem. Mauris tincidunt. Sed suscipit ultrices orci. Morbi quis augue. Ut id felis quis ipsum vestibulum vulputate. Nulla sit amet tellus ut nisl varius scelerisque. Nulla commodo eros. Maecenas luctus, nisi in pulvinar malesuada, magna felis egestas pede, tempus sagittis metus quam ut orci. Quisque quis mauris id dui venenatis adipiscing. Nulla cursus nulla dictum mi. Sed sollicitudin sapien sit amet tellus.</p>
        <p>Aenean eros lectus, pulvinar id, varius et, eleifend in, erat. Curabitur non ipsum in risus cursus faucibus. Sed aliquet lectus id neque gravida pulvinar. Fusce tincidunt tortor sit amet mauris tempor dapibus. Integer quis nulla. Maecenas sit amet eros. Aliquam ac massa. Ut commodo dapibus dolor. Proin ut tortor. Suspendisse pharetra laoreet mauris. Aenean viverra turpis auctor mauris. Vivamus tristique.</p>
        <p>In faucibus rhoncus mauris. Etiam lacinia suscipit arcu. Etiam consectetuer pharetra nisi. Cras dolor ante, ultrices suscipit, gravida sit amet, auctor tincidunt, purus. Integer ut nisl eget mi vestibulum viverra. Donec ac nibh. Vestibulum vel lorem. Sed sed orci at libero tempus tincidunt. Integer feugiat convallis nisl. Sed luctus sodales risus. Morbi eu neque. Donec lobortis gravida tellus. Pellentesque viverra bibendum lacus. Fusce nunc massa, tincidunt nec, porta ut, euismod a, quam. Nulla semper, dui sed nonummy cursus, velit lectus vestibulum enim, eu accumsan mi quam sed lorem. Cras suscipit, leo a vulputate pharetra, enim mi posuere turpis, non nonummy arcu nibh quis ante. Suspendisse sagittis facilisis turpis. In dui. Ut vitae est.</p>
        <p>Vivamus quis risus quis justo facilisis nonummy. Duis eget massa. Sed lacus purus, adipiscing quis, accumsan sit amet, gravida at, nibh. Nullam malesuada. Morbi molestie. Praesent rhoncus, dui quis pharetra tristique, leo mauris semper nisi, eu pellentesque est quam volutpat quam. Nunc congue, nisi at cursus suscipit, eros metus faucibus eros, sed eleifend enim lacus sit amet dolor. Maecenas sed lectus consequat magna aliquet rhoncus. Nullam purus. Cras rutrum, neque in aliquam aliquet, felis nisl semper ligula, id scelerisque tellus orci at massa. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec sit amet est.</p>
        <p>Morbi eget tellus vel ante rhoncus placerat. Maecenas libero. Fusce quis massa. Vestibulum euismod, nisl eget congue lobortis, mauris dolor aliquet dui, eu auctor tellus ligula eu justo. Donec mollis dolor interdum nunc. Quisque eget ipsum ut turpis aliquam volutpat. Aenean ac enim vitae purus fringilla consectetuer. Etiam consectetuer augue a enim. Sed felis. Maecenas et elit a lectus nonummy tincidunt. Morbi nulla ante, pharetra quis, egestas quis, commodo id, tortor. Quisque dignissim dapibus arcu. Cras rhoncus. Quisque fringilla sapien id pede. In vehicula pretium libero. Pellentesque ut lectus. Vestibulum pulvinar nibh sit amet justo. Phasellus a lacus in purus congue accumsan. Nullam luctus laoreet arcu. Praesent nonummy, arcu ut porttitor dapibus, nunc augue nonummy quam, et consectetuer nunc mi vel tortor.</p>
      </div>
    </td>
  </tr>
</table>
</body>
</html>

Can anyone suggest a solution?

Hi
I've been converting my site to start using CSS and am currently working on a transistional layout. It works perfectly in Firefox, but IE 6 has other ideas. At the moment its a fairly simple table, with a Logo at the top and nav bar, content, and then a footer. I want this to fill 100% of the height of the screen (which its doing), how ever there is a mysterious gap under the nav bar , where by the cell decides not to size to the 151px i have told it to do. Instead it creates a hefty gap (i've colour this gray for clarity). I'm not sure if it's something to do with the way I have handled the Nav bar using a list. The link is http://www.cartagteam.co.uk/xhtml2.php to the page with the problem.
Thanks

Hi everyone,

Please see this page in IE: shawnessy.ca/test.php

The height of the top row (not the <TH> row) of the calendar gets messed up. The page looks fine under Firefox.

Basically, I grabbed this calendar from my forum, which on its own, looks fine in IE: shawnessy.ca/forum/

Can anyone give me some suggestions as to how to fix this?

I am trying to set up the following table:

Code:

<form method='post' action='form.php'>
<table border=0 cellpadding='2'>
	<tr>
	<td><b>First Name: <font color='red'>*</font></b></td>
	<td><input type='text' name='f_name' size=45></td>
	</tr><tr> 
	<td><b>Last Name: <font color='red'>*</font></b></td>
	<td><input type='text' name='l_name' size=45></td>
	</tr><tr>
	<td><b>Telephone Number: <font color='red'>*</font></b></td>
	<td><input type='text' name='phone' size=45></td>
	</tr><tr>
	<td><b>Email Address: <font color='red'>*</font></b></a></td>
	<td><input type='text' name='email' size=45></td>
	</tr><tr>
	<td><b>Website:</b></td>
	<td><input type='text' name='website' size=45></td>
	</tr><tr>
	<td><b>Subject: <font color='red'>*</font></b></a></td>
	<td><input type='text' name='subject' size=45></td>
	</tr><tr>
	<td><b>Message: <font color='red'>*</font></b></td>
	<td><input type='text' name='message' size=45></td>
	</tr>
        <tr>
	<td><input type='submit' value='Valuate'></td>
	</tr>
</table>
</form>

The next to last td cell (message) I obviously need the height of this cell to be much higher and wider so people can type a message. However, I have tried td rowspan and colspan all with no results. What am I doing wrong?

Hello, i am creating a dynamic content php page. I start with a photoshop image and create slices and have it output the HTML and CSS table.
The problem i am having is that the center cell where the content should go does not expand when the the text goes out of its bound. Is there a way i can do this?

Here is the code and a link to the example output.

Code:

<STYLE TYPE="text/css">
<!--

#index-01 {
	position:absolute;
	left:0px;
	top:0px;
	width:923px;
	height:103px;
}

#index-02 {
	position:auto;
	left:923px;
	top:0px;
	width:100%;
	height:103px;
	background-image:url(images/headerbkgdlg.gif)
}

#index-03 {
	position:absolute;
	left:0px;
	top:103px;
	width:240px;
	height:35px;
}

#index-04 {
	position:absolute;
	left:240px;
	top:103px;
	width:487px;
	height:40px;
}

#index-05 {
	position:absolute;
	left:727px;
	top:103px;
	width:196px;
	height:35px;
}

#index-06 {
	position:absolute;
	left:923px;
	top:103px;
	width:32px;
	height:452px;
}

#index-07 {
	position:absolute;
	left:0px;
	top:138px;
	width:36px;
	height:417px;
}

#index-08 {
	position:absolute;
	left:36px;
	top:138px;
	width:182px;
	height:312px;
}

#index-09 {
	position:absolute;
	left:218px;
	top:138px;
	width:22px;
	height:417px;
}

#index-10 {
	position:absolute;
	left:727px;
	top:138px;
	width:196px;
	height:398px;
}

#index-11 {
	position:absolute;
	left:240px;
	top:138px;
	width:683px;
	height:397px;
}

#index-12 {
	position:absolute;
	left:36px;
	top:450px;
	width:182px;
	height:105px;
}

#index-13 {
	position:absolute;
	left:240px;
	top:536px;
	width:683px;
	height:19px;
}

#index-14 {
	position:absolute;
	left:0px;
	top:555px;
	width:923px;
	height:22px;
}

#index-15 {
	position:absolute;
	left:923px;
	top:555px;
	width:100%;
	height:21px;
	background-color:#DCCC00;
}

#index-16 {
	position: absolute;
	left: 923px;
	width: 100%;
	height: 451;
	top:103px;
}

-->
</STYLE>
 

http://67.86.83.106:81/homeline/index.php

I would like the bottom portion along with the menu cell to resize
vertically based on the amount of data but always atleast have the given size it is now.

Thanks for the help

Hey guys, I'm having some trouble getting a table to stretch to 100% of the browser height.

It seems to work in IE but not in netscape. Any suggestions?

Here is what I'm doing in headder tag:

Code:

<style type="text/css">
		html,body { height:100%; }
		.outer{ height:100%; } 
	</style>

Then in my code for the table I have this:
Code:

<table width="808" border="0" cellspacing="0" cellpadding="0" class="outer">

Should I try using a DIV tag instead? Please let me know if you have any suggestions.

Thanks!

I haven't got this one to work so I thought one of you might will know the answer. See the class, "tdTestNarrow" that I'm having trouble with... Thanks...

Code:

 <style type="text/css">
   table.tableCreditBureaus
   {
     float: left;
     width: 196px;
     font-size: 9pt;
   }
   td.tdCreditBureausColumn1
   {
     width: 150px;
     /* border: 1px solid #000000; */
   }
   td.tdCreditBureausColumn2
   {
     width: 11px;
     /* border: 1px solid #000000; */
   }
   td.tdCreditBureausColumn3
   {
     width: 35px;
     text-align: right;
     /* border: 1px solid #000000; */
   }
   td.tdCreditBureausTriColumns
   {
     width: 196px;
     /* border: 1px solid #000000; */
   }
   td.tdTestNarrow
   {
     height: 2px;
   }
 </style>

   <table class="tableCreditBureaus">
    <tr>
     <td class="tdCreditBureausTriColumns">
       <span style="font-weight:bold;text-decoration:underline;">Equifax</span>
    <tr>
     <td class="tdTestNarrow">
       &nbsp;
    <tr>
     <td class="tdCreditBureausColumn1">
       Saved Report
     <td class="tdCreditBureausColumn2">
       $
     <td class="tdCreditBureausColumn3">
       1.00
    <tr>
     <td class="tdCreditBureausTriColumns">
       &nbsp;
    <tr>
     <td class="tdCreditBureausTriColumns">
       <span style="text-decoration:underline;">Products</span>
    <tr>
     <td class="tdCreditBureausColumn1">
       Credit Report (I)
     <td class="tdCreditBureausColumn2">
       $
     <td class="tdCreditBureausColumn3">
       10.00
    <tr>
     <td class="tdCreditBureausColumn1">
       Credit Report (J)
     <td class="tdCreditBureausColumn2">
       $
     <td class="tdCreditBureausColumn3">
       1.00
    <tr>
     <td class="tdTestNarrow">
       &nbsp;
    <tr>
     <td class="tdCreditBureausTriColumns">
       <span style="text-decoration:underline;">Ancillary Products</span>
    <tr>
     <td class="tdCreditBureausColumn1">
       Safescan
     <td class="tdCreditBureausColumn2">
       $
     <td class="tdCreditBureausColumn3">
       1.00
    <tr>
     <td class="tdCreditBureausColumn1">
       Beacon
     <td class="tdCreditBureausColumn2">
       $
     <td class="tdCreditBureausColumn3">
       1.00
    <tr>
     <td class="tdCreditBureausColumn1">
       On-Line Directory
     <td class="tdCreditBureausColumn2">
       $
     <td class="tdCreditBureausColumn3">
       1.00
    <tr>
     <td class="tdCreditBureausColumn1">
       OFAC Alert
     <td class="tdCreditBureausColumn2">
       $
     <td class="tdCreditBureausColumn3">
       1.00
   </table>

Hello,

I have a situation where I would like to set the height of a table row, but I won't know what the table's total height is. In Firefox, setting the cell is enough to make it work, but in IE, no matter what I set it as, it always wants to increase the size, seemingly to balance it out with the lower (and longer) cell. I hope that's clear!

Here's my example:
(Also located at http://www.chs.fsu.edu/temp/test-table.html )

<html>
<head></head>
<body>

<table>
<tr style="background:blue;">
<td style="height:50px;">Headline</td>
<td style="height:500px;" rowspan="2">Nav</td>
</tr>
<tr style="background:red;">
<td>Body</td>
</tr>
</table>

</body>
</html>

In this case, I have set Nav to be 500px, but in production this element will not be known until the menu is automatically generated.

In Firefox, it works fine and the Body takes up the remaining 450px. But in IE6, Headline somehow gets stretched, and I presume this is because Body does not have an explicit height.

Is there any way to fix this while maintaining the structure?

Thank you very much for your time!

Brian