Welcome to WebmasterWorld Guest from 50.19.34.234

Forum Moderators: not2easy

Message Too Old, No Replies

Table will not expand 100% height in FireFox

But Div Wrapper will!

     

Cienwen

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

5+ Year Member



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!

GrafixGuru

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

5+ Year Member



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>

tangor

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

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



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)

Cienwen

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

5+ Year Member



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.

 

Featured Threads

Hot Threads This Week

Hot Threads This Month