Welcome to WebmasterWorld Guest from 54.160.198.60

Forum Moderators: not2easy

Message Too Old, No Replies

Table will not expand 100% height in FireFox

But Div Wrapper will!

     
7:23 pm on Nov 4, 2008 (gmt 0)

Junior Member

10+ Year Member

joined:Nov 22, 2005
posts: 110
votes: 0


I have finally gotten the bodyWhite DIV wrapper to expand 100% but now the containing table is not going 100%. But in FireFox only.

Please excuse this excess of code. I am afraid it is some small this that I think is not important.

@charset "utf-8";
/* CSS Document */

html {
height:100%;
}

body {
background-color: #92c94e;
text-align: center;
padding: 0;
margin: 0 auto;
height: 100%;
}

.outerTable {
margin:0 auto;
width: 1024px;
height: 100%;
}

.rightShade {
width: 24px;
height: 100%;
background:url(images/border-right.gif) repeat-y;
}

.leftShade {
width: 23px;
height: 100%;
background:url(images/border-left.gif) repeat-y;
}

.cellTop {
width: 977px;
height: 100%;
margin: 0px 15px 0px 15px;
border: solid 1px #773b15;
background-color:#FFFFFF;
text-align:;
}

#cellSpacer {
margin: 0px 15px 0px 15px;
border: solid 1px #773b15;
background-color:#FFFFFF;
text-align:left;
}

#headerDiv {
background-image: url(images/header_02.jpg);
background-position:center;
background-repeat:no-repeat;
height: 117px;
margin: 0 auto;
}

#banner {
padding: 10px 0 10px 0;
}

.orgCell {
width:977px;
height:100%;
text-align:center;
vertical-align:top;
background-color: #f8dd8e;
}

#bodyWhite {
width: 947px;
height: 100%;
background-color: #FFFFFF;
margin: 0 15px 0 15px;
}

#navDiv {
text-align:center;
width: 977px;
height: 30px;
margin: 0 auto;
padding: 0;
}

.navList {
margin: 0 auto;
padding: 10px 0 10px 0;
}

ul.navList li {
font: bold 14px Verdana, sana-serif;
font-weight: 100;
display: inline;
margin: 0;
}

ul.navList a {
color: #08197e;
list-style-type: none;
text-decoration: none;
text-transform: uppercase;
padding: 0 10px 0px 10px;
margin: 0 0 10px 0;
}

ul.navList a:hover {
border-bottom: 2px #92c94e solid;
}

#subNav {
width: 240px;
background-image:url(images/sub-nav-bg.jpg);
background-repeat: no-repeat;
text-align: left;
float: left;
margin: 20px;
}

ul.subNavUl {
font: 14px Verdana, Arial, Helvetica, sans-serif;
color: #122561;
text-transform: uppercase;
list-style-type:none;
text-indent: ;
margin: 0px 0 0 0;
}

ul.subNavUl li {
margin: px;
}

ul.subNavUl li a {
color: #122561;
text-decoration:none;
}

ul.subNavUl li a:hover {
border-left: 2px #92c94e solid;
}

.UlIndent li{
font: 12px;
text-transform: none;
font:lighter;
padding: 0px 0 0px 15px;
}

#bodyContent {
width: 640px;
height: 100%;
float:right;
text-align: left;
margin: 18px 0 0 0;
}

#bodyContent ul, #bodyContent ol {
font: 15px Arial, Helvetica, sans-serif;
color: #3c3b3b;
}

p {
font: 15px Arial, Helvetica, sans-serif;
color: #3c3b3b;
}

h1 {
font: 18px Verdana, Arial, Helvetica, sans-serif;
text-transform: uppercase;
font-weight: 100;
color: #021140;
padding: 0 0 0 10px;
border-left: 2px #92c94e solid;
}

h2 {
font: bold 14px Verdana, Arial, Helvetica, sans-serif;
color: #021140;
}

#footer {
width: 947px;
clear:right;
}

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="all.css" rel="stylesheet" type="text/css" />
</head>

<body>
<table class="outerTable" border="0" cellspacing="0" cellpadding="0" height="100%">
<tr>
<td class="leftShade">&nbsp;</td>
<td class="orgCell">
<div id="headerDiv"></div>
<div id="navDiv">
<ul class="navList">
<li><a href="index.php">Home</a></li>
<li><a href="project.htm">Link</a></li>
<li><a href="school.htm">Link</a></li>
<li><a href="press.htm"> Press</a></li>
<li><a href="photos.htm">Photos</a></li>
<li><a href="help.htm">You Can Help</a></li>
<li><a href="contacts.htm">Contacts</a></li>
</ul>
</div>
<div id="banner"><img src="images/banner.jpg" width="946" height="242" /></div>
<div id="bodyWhite">
<!-- Beginning of Side Nav -->
<div id="subNav">
<ul class="subNavUl">
<li><a href="index.php">Home</a></li>
<li><a href="project.htm">Link</a></li>
<li><a href="school.htm">Link</a></li>
<li><a href="press.htm"> Press</a></li>
<li><a href="photos.htm">Photos</a></li>
<li><a href="help.htm">You Can Help</a></li>
<li><a href="contacts.htm">Contacts</a></li>
<span class="UlIndent"><li>USA Contacts</li></span>
</ul>
</div>
<!-- End of Side Nav -->
<!-- Begin Body Content -->
<div id="bodyContent">
<h1>How can I Help</h1>
<h2>Fundraising Efforts Currently Focus on:</h2>
<ol>
<li>Construction for Grades 4-8
<ul>
<li>Classrooms and Dormitories</li>
<li>Teacher Housing</li>
</ul>
</li>
<li>Principal, teacher and social worker salaries</li>
<li>Purchase land for the High School</li>
<li>Stuff<br />
(This will be necessary until the conference/retreat center is fully operational)</li>
</ol>
<h1>Send a donation</h1>
<p>stuff</p>
<p>stuff</p>
<p>Mailing Address:</p>
<blockquote>
<p>stuff<br />
stuff <br />
stuff<br />
</p>
</blockquote>
<h1>Volunteer Your Time</h1>
<p>Share our vision, broaden our reach<br />
<strong><br />
Organize a group</strong></p>
<ol>
<li>Invite us to speak at your civic group meeting</li>
<li>Host a lunch or dinner with a presentation</li>
<li>Donate frequent flyer miles</li>
<li>Help develop school participation</li>
</ol>
<p><strong>Stuff stuff stuf alkd lakd lakd lak dkdl alkd</strong></p>
<p>&nbsp;</p>
</div>
<!-- End Body Content -->
</div>
</td>
<td class="rightShade">&nbsp;</td>
</tr>
</table>
</body>
</html>

Thank you in advance for your help!

12:57 pm on Nov 5, 2008 (gmt 0)

New User

5+ Year Member

joined:Nov 5, 2008
posts: 12
votes: 0


Try this, it will work

.orgCell {
width:977px;
display:table;
text-align:center;
vertical-align:top;
background-color: #f8dd8e;

}

#bodyWhite
{
width: 947px;
height: 100%;
background-color: #FFFFFF;
margin: 0 15px 0 15px;
display:table;
}

html code

<table class="outerTable" border="0" cellspacing="0" cellpadding="0" height="100%">
<tr>
<td class="leftShade">
&nbsp;
</td>
<td>
<div class="orgCell">
<div id="headerDiv">
</div>
<div id="navDiv">
<ul class="navList">
<li><a href="index.php">Home</a></li>
<li><a href="project.htm">Link</a></li>
<li><a href="school.htm">Link</a></li>
<li><a href="press.htm">Press</a></li>
<li><a href="photos.htm">Photos</a></li>
<li><a href="help.htm">You Can Help</a></li>
<li><a href="contacts.htm">Contacts</a></li>
</ul>
</div>
<div id="banner">
<img src="images/banner.jpg" width="946" height="242" /></div>
<div id="bodyWhite">
<!-- Beginning of Side Nav -->
<div id="subNav">
<ul class="subNavUl">
<li><a href="index.php">Home</a></li>
<li><a href="project.htm">Link</a></li>
<li><a href="school.htm">Link</a></li>
<li><a href="press.htm">Press</a></li>
<li><a href="photos.htm">Photos</a></li>
<li><a href="help.htm">You Can Help</a></li>
<li><a href="contacts.htm">Contacts</a></li>
<span class="UlIndent">
<li>USA Contacts</li></span>
</ul>
</div>
<!-- End of Side Nav -->
<!-- Begin Body Content -->
<div id="bodyContent">
<h1>
How can I Help</h1>
<h2>
Fundraising Efforts Currently Focus on:</h2>
<ol>
<li>Construction for Grades 4-8
<ul>
<li>Classrooms and Dormitories</li>
<li>Teacher Housing</li>
</ul>
</li>
<li>Principal, teacher and social worker salaries</li>
<li>Purchase land for the High School</li>
<li>Stuff<br />
(This will be necessary until the conference/retreat center is fully operational)</li>
</ol>
<h1>
Send a donation</h1>
<p>
stuff</p>
<p>
stuff</p>
<p>
Mailing Address:</p>
<blockquote>
<p>
stuff<br />
stuff
<br />
stuff<br />
</p>
</blockquote>
<h1>
Volunteer Your Time</h1>
<p>
Share our vision, broaden our reach<br />
<strong>
<br />
Organize a group</strong></p>
<ol>
<li>Invite us to speak at your civic group meeting</li>
<li>Host a lunch or dinner with a presentation</li>
<li>Donate frequent flyer miles</li>
<li>Help develop school participation</li>
</ol>
<p>
<strong>Stuff stuff stuf alkd lakd lakd lak dkdl alkd</strong></p>
<p>
&nbsp;</p>
</div>
<!-- End Body Content -->
</div>
</div>
</td>
<td class="rightShade">
&nbsp;
</td>
</tr>
</table>

1:14 pm on Nov 5, 2008 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member tangor is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Nov 29, 2005
posts:6968
votes: 389


Deal with the table first...and know that height will not work cross browser. Forget all the fancy. Serious. Scrap everything css and start with table, if that's what you need, then add the goodies. You'd be amazed.

You'd be more amazed with starting with container div and working from there, but that's another story.

(still have pages coded in tables, none with height which rarely to never works, but getting rid of them when time and etc allow)

9:32 pm on Nov 7, 2008 (gmt 0)

Junior Member

10+ Year Member

joined:Nov 22, 2005
posts: 110
votes: 0


Thanks.

I am abandoning the tables and going for all new CSS.

Thus, I have a host of new issues. I will start a new thread though in a min.

 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members