|
CSS - Css Problem, Table 100% Height
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 Similar TutorialsI want to set up a table so that error messages appear directly above specific table columns in the form of a div tag with a red background and the same width as the column. To do this I've added a div tag inside the <th> element of the table, with the display property set to 'none'. Code: <th> <nobr>Header Content</nobr> <div id="error_message">Error Message</div> </th> When I want to display an error message above the table I use the following styles on the div tag Code:
background-color: #ffcccc;
width: 100%;
position: relative;
left: 0px;
top: -100px;
z-index: 1;
display: block;
It displays the div tag above the header like I want, but it still stretches the height of the <th> element as if it was still contained inside of it. How do I do this without stretching the cell height? I've never done much CSS work, but I know this has to be an easy fix. Each DIV appears to be 10px higher when viewed in IE. I want them to be 8px high and they end up being 18px high. In Firefox, Netscape, and Opera it works fine. Anyone mind correcting this imbarrassing little problem? Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
<title>IE 10px Padding Problem</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
body {
margin:0px; }
#container {
position:relative;
margin:auto;
width:730px; }
#header {
height:110px; }
.textualtop {
border:1px solid #000000;
height:8px; }
.textualbottom {
border:1px solid #000000;
height:8px; }
</style>
</head>
<body>
<div id="container">
<div id="header"></div>
<div class="textualtop"></div>
<div class="textualbottom"></div>
<div class="textualtop"></div>
<div class="textualbottom"></div>
<p>Notice how in IE6 each DIV is 10px higher then in FF. Why is it doing this?</p>
</div>
</body>
</html>
-------------------------------------------------------------------------------- Hello, Not exactly sure where to post this question... but: I'm having a bit of trouble keeping a table at a fixed height. What I have is a Small 200x80px table above my an input form. As users type data into the input form, javascript code dynamically updates the contents of the table. I have the table width properly fixed, and the input fields have character limitations... however if a user inputs a lot of capital letters or other wide characters, the table automatically increases in height when the text wraps. It's pretty much necessary that the text wraps for the middle lines of the table, and on the other two lines I have used the javascript to remove wrapping, but I never want the table to grow longer than 80px no matter how much is typed in the fields. Is there a way that I can constrain the table height? Thanks in advance! I'm trying to get a table inside another table which completely fills the parent table, but I cannot get it to work. The simple piece of code illustrates my problem. The red table is inside the blue table but does not cover the entire cell from top to bottom, but only the centre. I want this table to be streched. Obviously height: 100% doesn't work. Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<html>
<body>
<table>
<tbody>
<tr>
<td>
1<br>2<br>3<br>4<br>5<br>
</td>
<td style="background: blue;">
<table style="height: 100%; background: red;">
<tbody>
<tr>
<td style="vertical-align: bottom">
Test
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</body>
</html>
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. 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? 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 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? 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? Hey peeps, my problem is. I have a main table that is 700 px wide and consists of 3 cols and 1 row. Now in the first and last cell i have another table that consists of 1 col and 3 cells. In the Top and bottom cell of both tables i have an image that is 5px wdie * 20px high. In the middle cell i have a 5px wide*1px high background image which tiles in that cell. Now the problem is that the main table will never have a fixed height so i dont know what height to set the cells in the middle. Its sort of a shadow effect i made for my site. I was kind of hoping the there was some way of making the tables height match the height of the cell thats its in. Anyone got any ideas. I figured there would be some css trick i could use? Hope it makes sense. 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? 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 Hello people I have a silly style-related question I am trying to render a simple HTML table The table has 2 rows on its left column and one cell on its right column (rowspan = 2) What I am trying to do is to cause the top-left cell to have a fixed height, and to give the remaining height to the cell below it (in the same column). This should work no matter how tall is the table Here is my snippet: Code: <html> <body> <table width="100%" border="1" cellpadding="0" cellspacing="0"> <tr> <td width="50" height="45" valign="top" style="padding-right:5px; padding-top:5px;"><img src="graphic.jpg" width="30" height="40" style="border:1px solid red;"></img></td> <td width="99%" rowspan="2" valign="top" style="padding-bottom:5px;">This<br> is<br> the<br> content<br> of<br> the<br> text<br> on<br> the<br> right</td> </tr> <tr> <td width="50" style="padding-bottom:5px;" valign="top">text under photo</td> </tr> </table> </body> </html> The code behaves correctly when viewed in Firefox 1.5 (see attachment screenshot) but when viewed in IE6.0, the top-left cell seems to ignore my height request... any help would be appreciated 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">
<tr>
<td class="tdCreditBureausColumn1">
Saved Report
<td class="tdCreditBureausColumn2">
$
<td class="tdCreditBureausColumn3">
1.00
<tr>
<td class="tdCreditBureausTriColumns">
<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">
<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>
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! 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 Hi, My client very much likes a website that belongs to their competition. The thing she likes the most is the fact that the content is centered horizontally and vertically in the browser window. The way they (her competition) have constructed the site is to to place all the content inside a table 100% wide and 100% high with the content centered horizontally and vertically using the table's valign and align attributes. However, this isn't very "standards", is it . . . so, does anyone know of a way this same effect (content centered horizontally and vertically in browser window) can be acheived using CSS? Thanks! <div height = 100% doesn't work inside <table> but if i change height = 900px, it works. anyone know how to fix it? see example code below. thx so much <table border = 1> <tr> <td> mesg </td> </tr> <tr> <td> <div style='HEIGHT:100%; WIDTH:100%; OVERFLOW:auto'> <table border=1 width=100%> <tr><td>stuff</td> <td>more stuff</td></tr> <tr><td>stuff</td> <td>msg </div></td></tr> </table> </div> </td></tr> </table> |
|||||||