|
CSS - Making A <table> Or <div> 100% Of The Height In All Browsers
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! Similar TutorialsI'm using the following code: <font style="font-family:Verdana; font-size:10px; line-height: 70%; color: rgb(153, 153, 153);"<br />Photo Caption Goes Here</font> And it doesn't seem to be cross-browser compatible. The photo caption seems to publish differently across multiple browsers. I like how it's displayed in Firefox but on other browsers the photo caption is partially displayed or the line height is too close together. What's the best way to add css to a <font style=""> so it's cross browser compatible? Or does this have something to do with other styles on the page? Is it possible to have the <div>'s #content to expand 100% in height for Gecko browsers? It worked fine in IE.... 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">
<style type="text/css">
/* ================================================== */
/* == Web Layout == */
/* ================================================== */
body {
MARGIN: 0px;
PADDING: 0px;
WIDTH: 100%;
HEIGHT: 100%;
BACKGROUND-COLOR: #55649D;
TEXT-ALIGN: center; /* for IE stupidity */
BORDER-TOP: 0px solid black; /* Test/Debug, otherwise leave actual table border as 0px */
BORDER-RIGHT: 0px solid black; /* Test/Debug, otherwise leave actual table border as 0px */
BORDER-LEFT: 0px solid black; /* Test/Debug, otherwise leave actual table border as 0px */
BORDER-BOTTOM: 0px solid black; /* Test/Debug, otherwise leave actual table border as 0px */
}
html {
MARGIN: 0px;
PADDING: 0px;
WIDTH: 100%;
HEIGHT: 100%;
}
#content {
MARGIN-TOP: 0px; /* border-top is at one, so margin-top only need to be at one pixel */
MARGIN-BOTTOM: -1px; /* border-bottom is at one, so margin-bottom only need to be at one pixel */
MARGIN-LEFT: auto;
MARGIN-RIGHT: auto;
PADDING: 0px;
WIDTH: 598px;
HEIGHT: 100%;
BACKGROUND-COLOR: #8FA1B3;
BORDER-TOP: 1px solid white; /* Test/Debug, otherwise leave actual table border as 0px */
BORDER-RIGHT: 1px solid white; /* Test/Debug, otherwise leave actual table border as 0px */
BORDER-LEFT: 1px solid white; /* Test/Debug, otherwise leave actual table border as 0px */
BORDER-BOTTOM: 1px solid white; /* Test/Debug, otherwise leave actual table border as 0px */
}
#wrapper {
MARGIN: 0px;
PADDING: 0px;
WIDTH: 100%;
MIN-HEIGHT: 100%;
BACKGROUND-COLOR: #77649D;
BORDER-TOP: 0px solid black; /* Test/Debug, otherwise leave actual table border as 0px */
BORDER-RIGHT: 0px solid black; /* Test/Debug, otherwise leave actual table border as 0px */
BORDER-LEFT: 0px solid black; /* Test/Debug, otherwise leave actual table border as 0px */
BORDER-BOTTOM: 0px solid black; /* Test/Debug, otherwise leave actual table border as 0px */
}
* html #wrapper {HEIGHT: 100%;} /* IE Hack since IE does not support "min-height" in the #wrapper*/
/* ================================================== */
/* == HTML General == */
/* ================================================== */
div
{
MARGIN: 0px;
PADDING: 0px;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="content">asdf</div>
</div>
</body>
</html>
THanks, FletchSOD I have 2 div columns on a web page, they are positioned using css... the right column is taller than the left column, but the left column does not expand to the full height of the right column... I require this, because the left column has a background color that I want to go right to the bottom of the page. I have height: 100%; in the css style for the left column, but that only makes it 1 screen high... does anyone know of a way to make it the full height of the other column, ie stretch? I have tried height: auto; but that doesnt work either. Hi. I'm having a funny problem where using 100% height makes the content div scrollable, even when there's no actual content in it. I am trying to make my content div be 100% height of the window size, so I have the following css: Code:
html, body
{
background: #FFFFFF;
margin: 0px;
padding: 0px;
height: 100%;
font-family: Trebuchet MS, Helvetica, sans-serif;
}
#wrapper
{
background: #FFFFFF;
position: relative;
width: 100%;
height: 100%;
margin: 0px auto;
}
#header
{
background-image: url("images/h-bg.png");
background-repeat: repeat-x;
margin: 0px auto;
padding: 0px;
width: 960px;
height: 107px;
}
#header .logo
{
margin-left: 10px;
}
#header .bg_l
{
float: left;
}
#header .bg_r
{
float: right;
}
#nav
{
background-image: url("images/n-bg.png");
position: relative;
margin: 0px;
width: 100%;
height: 143px;
text-align: center;
}
#nav a
{
float: left;
outline-style: none;
width: 240px;
height: 156px;
}
#nav_btn_wrapper
{
width: 960px;
margin: 0px auto;
}
#content
{
position: relative;
background-image: url("images/c-bg.png");
background-repeat: repeat-y;
width: 930px;
height: 100%;
margin: 10px auto 0px auto;
padding: 10px 15px 0px 15px;
font-size: 12pt;
}
As you can see I have height: 100% in every parent element from container up. Without the height set to 100%, the container div just cuts off, which is bad because I'm using a glowy background on it, and it just cuts off abruptly. I have used this method before on another design, but it worked only cos the wrapper and the container were both white, so when the container chopped off, the wrapper would continue, and it would look seemless. See www.landmarkmeds.com to see the problem in action. I have tried to remove the margin on the content div, but that only moved it up a bit. Also, looking at it in firebug, it reports the height as the correct value, and even shows the ruler down to the bottom of the browser window. Why then it allows me to scroll I don't know! I'm sure it's something stupid I've missed, but please help! Hey I am developing a site for our band, and I'm having trouble getting the nav bar to look right. The page is http://www.mattbray.curvedspaces.co..._beta/index.php and I don't want the left hand section to stop halfway down the page. The stylesheet is called style.css in the same directory. Code: /* page defaults */
body {
margin: 0px;
padding: 0px;
text-align:center;
font-family: Verdana, Arial, Helvetica, sans-serif;
background-color: #EAEAEA;
}
/* Layout divs */
#container {
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #666666;
position: static;
left: 40px;
top: 12px;
padding: 0px;
width: 800px;
border-right: #003366 1px solid;
border-left: #003366 1px solid;
margin-right: auto;
margin-left: auto;
height: auto;
text-align:left;
background-color: #FFFFFF;
}
#title {
background-image: url(images/saved_title.gif);
margin-top: 10px;
background-repeat: no-repeat;
height: 150px;
border-top-color: #000000;
border-top-style: solid;
border-top-width: 1px;
border-bottom-color: #000000;
border-bottom-style: solid;
border-bottom-width: 1px;
border-color: #000000;
}
#navbar {
background-image: url(images/navbar.gif);
background-repeat: no-repeat;
border-bottom-color: #000000;
border-bottom-style: solid;
border-bottom-width: 1px;
padding: 5px;
height: 20px;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
#navwin {
font-family: Verdana, Arial, Helvetica, sans-serif;
border-right: 1px solid black;
padding: 5px;
background-color: #CCCFFF;
width: 230px;
height: 100%;
margin: 0;
float: left;
font-size: medium;
}
#content {
float: left;
font-family: Verdana, Arial, Helvetica, sans-serif;
padding: 10px;
padding-top: 40px;
background-image: url(images/content.gif);
background-repeat: no-repeat;
background-position: -239px 0px;
background-color: #FFFFFF;
height: auto;
width: 539px;
}
#footer {
font-family: Verdana, Arial, Helvetica, sans-serif;
background-color: #CCCCCC;
margin-bottom: 10px;
padding: 10px;
border-top: solid 1px black;
border-bottom: solid 1px black;
width: 780px;
height: 25px;
text-align: center;
}
/* Links */
a:link {
color: #006699;
}
a:visited {
color: #006699;
}
a:hover {
color: #006699;
text-decoration: none;
}
a:active {
color: #006699;
}
/* elements */
#navwin h2 {
font-size: large;
display: block;
}
#navwin ul {}
thanks Matt as you can see on: Click Me when you hover over the links on the menu the height of the box changes since it is set to auto, is there a fix so it doesn't move? The following code works in most browsers but not so well in IE, there seems to be an extra block of css shading in the last box in the row. this is what we really want removed. has anyone got any ideas how the issue IE can be fixed. thanks in advance for your help. Code:
<style type="text/css">
<!--
.menucontainer { background:#799BD9; margin:0 5px;}
.menurtop1, .menurbottom1{ display:block; background:#125892; }
.menurtop1 *, .menurbottom1 *{ display: block; height: 1px; overflow: hidden; background:#799BD9; }
.r1{ margin: 0 5px}
.r2{ margin: 0 3px}
.r3{ margin: 0 2px}
.r4{ margin: 0 1px; height: 2px }
a.one:link { color: #000; }
a.one:visited { color: #000; }
a.one:hover { color: #fff; }
a.one:active { color: #000; }
a.one { text-decoration: none; }
h1 { text-align: left; font: small tahoma; font-size: 12px; font-weight: bold; margin: 0 0; padding: 5; }
h2 { text-align: left; font: small tahoma; font-size: 12px; font-weight: bold; margin: 0 5; padding: 5; }
-->
</style>
<style>
<!--
A {color:#000000; font-weight: normal;}
A:hover {color: #0066FF; font-weight: normal;}
-->
</style>
<body bgcolor="#003399">
<table width="100%" style="border-collapse:collapse;">
<tr>
<td width="0%" height="21">
<div class="menucontainer" align="center">
<b class="menurtop1"><b class="r1"></b><b class="r2"></b><b class="r3"></b><b class="r4"></b></b>
<table width="100%" style="border-collapse:collapse;" dwcopytype="CopyTableColumn">
<tr>
<td NOWRAP> <div align="center"><a href="http://<?=$siteurl;?>/?ac=a" STYLE="text-decoration: none"><font color="#FFFFFF" face="Tahoma"> l1</font></a> </div></td>
<td NOWRAP> <div align="center"><a href="http://<?=$siteurl;?>/members/index.php?ac=s" STYLE="text-decoration: none"><font color="#FFFFFF" face="Tahoma"> l2</font></a> </div></td>
<td NOWRAP> <div align="center"><a href="http://<?=$siteurl;?>/members/index.php" STYLE="text-decoration: none"><font color="#FFFFFF" face="Tahoma"> l3</font></a> </div></td>
<td NOWRAP> <div align="center"><a href="http://<?=$siteurl;?>/?ac=f" STYLE="text-decoration: none"><font color="#FFFFFF" face="Tahoma"> l4</font></a> </div></td>
<td NOWRAP> <div align="center"><a href="http://<?=$siteurl;?>/?ac=c" STYLE="text-decoration: none"><font color="#FFFFFF" face="Tahoma"> l5</font></a> </div></td>
<td NOWRAP> <div align="center"><a class="bm" title="link me" href="http://<?=$siteurl;?>/?ac=b" STYLE="text-decoration: none"><font color="#FFFFFF" face="Tahoma"> l6</font></a> </div></td>
<td NOWRAP> <div align="center"><a href="http://<?=$siteurl;?>/?ac=s" STYLE="text-decoration: none"><font color="#FFFFFF" face="Tahoma"> l7</font></a> </div></td>
</tr>
</table>
<b class="menurbottom1"><b class="r4"></b><b class="r3"></b><b class="r2"></b><b class="r1"></b></b></div>
</td>
<td width="5%" NOWRAP><div align="center"><font color="#FFFFFF" size="2" face="Tahoma">123456</font></div></td>
</tr>
</table>
I've been working on adding a separate mobile stylesheet to my site. I uploaded my new stylesheet and added the link to it in my header with media="handheld". However, when I looked at it in my phone (android with opera mini browser) it still looked like the screen version. Then I realized that if I go into my browser settings I could change it to a mobile/1 column view, then voila, I could see all of the changes I made. I had someone check on their iphone and same deal (not sure what browser they had), they see it as the screen layout. So is this typical that most mobile phone browsers show the screen layout by default? I didn't even know this about my phone until I started testing my page. Is there a way I could force it to render my mobile css regardless of the settings? I would like to avoid having a separate site just for mobile devices. 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>
-------------------------------------------------------------------------------- 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 am VERY new at this, and I need all the help I can get. I am trying to make a table that looks like this: I am VERY new at this, and I need all the help I can get. I am trying to make a table that looks like this: http://i78. photobucket.com/albums/j108/l8org8or/HELP.jpg (take out the spaces before "photobucket") I need the table width to be 563, and I want everything to be centered. font size 14 and 9 Any help you can offer would be greatly appreciated. I need the table width to be 563, and I want everything to be centered. font size 14 and 9 Any help you can offer would be greatly appreciated. Hello, I have a page with the left margin set to 100. How can I use CSS to make a table have a left margin of 0. I need everything else to be @ left margin 100. So I want to totally ignore the left margin setting only for this table. i have tried margins and padding but its not working! Code: .contenttable {
font-family: Verdana;
font-size: 12px;
color: #606060;
}
.contenttable tr {
margin-top:10px;
margin-bottom:10px;
padding-top:10px;
padding-bottom:10px;
}
the table is here. any ideas how i can improve it otherwise, after the <tr> margins are fixed? 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'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'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. 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 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. |
|||||||