homepage Welcome to WebmasterWorld Guest from 54.224.53.192
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
Table will not expand 100% height in FireFox
But Div Wrapper will!
Cienwen

5+ Year Member



 
Msg#: 3780135 posted 7:23 pm on Nov 4, 2008 (gmt 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!

 

GrafixGuru

5+ Year Member



 
Msg#: 3780135 posted 12:57 pm on Nov 5, 2008 (gmt 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>

tangor

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



 
Msg#: 3780135 posted 1:14 pm on Nov 5, 2008 (gmt 0)

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

5+ Year Member



 
Msg#: 3780135 posted 9:32 pm on Nov 7, 2008 (gmt 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.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved