homepage Welcome to WebmasterWorld Guest from 107.21.163.227
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Subscribe to WebmasterWorld
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: DrDoc

CSS Forum

    
Container Div expands way below it's container Div in FireFox
Everything in the outer container diapears in IE
Cienwen




msg:3782281
 9:48 pm on Nov 7, 2008 (gmt 0)

Hello all.

I am attempting to abandon all use of tables for layout and go all in with CSS but I am having some weird issues.

I have several layers of divs contained within wrappers. The outer most wrapper is working great (outerWrapper). It has tree divs in it. 2 are containers for a drop shadow image that runs along the right and left sides (rightShade and leftShade). In between the 2 is a div to house the header footer, navigation and info wrapper (mainContent). Inside mainContent is all my page stuff plus another wrapper to contain all the content stuff (whiteWrapper). Everything should fill the page height 100%.

It is working pretty good in FireFox except the whiteWrapper is extending way down below the end of it's container (mainContent).

In IE there is a big blank inside mainContent. It appears empty.

Here's the code.

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

html {
height:100%;
}

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

#outerWrapper {
margin:0 auto;
width: 950px;
height: 100%;
}

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

#rightShade {
margin: 0;
width: 23px;
height: 100%;
background:url(images/border-right.gif) repeat-y;
float:right;
}

#mainContent {
margin:0;
height:100%;
background-color: #f8dd8e;
}

* html #leftShade {
margin-right: -3px;
}

* html #rightShade {
margin-left: -3px;
}

#header {
width: 874px;
height: 116px;
background-image: url(images/header_02.jpg);
background-repeat: no-repeat;
margin: 0 38px 0 38px;
}

#navDiv {
height: 30px;
}

#navDiv ul {
margin: 10px 0 0 0;
}

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

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

#whiteWrapper {
margin: 10px 38px 0 38px;
height: 100%;
background: #FFFFFF;
}

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

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

<!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="test.css" rel="stylesheet" type="text/css" />
</head>
<body>

<div id="outerWrapper">

<div id="leftShade"></div>
<div id="rightShade"></div>
<div id="mainContent">
<div id="header"></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" /></div>

<div id="whiteWrapper">

<div id="subNav">
<ul class="subNavUl">
<li><a href="index.php">Home</a></li>
<span class="UlIndent"><li>Mission Statement</li></span>
<span class="UlIndent"><li>School Founder</li></span>
<span class="UlIndent"><li>Share Our Vision</li></span>
<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>
<p>&nbsp;</p>
</div>
<div id="bodyContent"></div>

</div>

</div>

</div>

</body>
</html>

Any Ideas?

 

alt131




msg:3782406
 4:54 am on Nov 8, 2008 (gmt 0)

Hi Cienwen,
In IE there is a big blank inside mainContent. It appears empty
Are you meaning in ie6? That's caused by the ie box-model which adds widths and margins together. As the specified div#outerwrapper width doesn't allow enough space, the header is being "dropped" until there is enough room. (As the heights are set to be 100% of the viewport, the header is "dropped" 100% of the viewport height which is why you see a "blank" until scrolling "below the fold".)

On the provided code my guess is you wish the header to display visually "centered". If that's correct, tell the browser what you want - equal distribution of space on left and right (rather than margins of a precise width). Do that by removing the explicit margin setting margin: 0 38px 0 38px; and replace with margin:0 auto;

It is working pretty good in FireFox except the whiteWrapper is extending way down below the end of it's container (mainContent).
div#whitewrapper is obeying the directive to calculate its height as 100% of its parent (maincontent). div#maincontent has been ordered to calculate height as 100% of its parent - div#outerwrapper, and div#outerwrapper calculates height from body, and so on. The outcome of this inheritance is that div#whitewrapper is drawn with a height dimension that is the same as the initial height measurement for the viewport.

Stop child elements "overflowing" by setting overflow:hidden on the parent - in this case div#maincontent. However, that works on the provided code because there is no content (text, images etc) that requires scrolling.

If the document needs to scroll, a different technique will be required - provide a little more information about the other elements on the page (like content, footers, etc).

- always useful to validate your code - the spans around the <li>'s are not valid - perhaps move the class to the <li> to avoid using them

Cienwen




msg:3782737
 11:00 pm on Nov 8, 2008 (gmt 0)

Yes, I need the content to scroll. I have reworked somethings and your IE6 suggestion worked great. But, of course, I have new issues.

The same thing is still happening in FireFox. The #whiteWrapper extends way below the #outerWrapper. Otherwise everything looks great.

Things are really crazy in IE(6). The #whiteWrapper is about 15px too narrow on each side. The #bodyContent Div has completely disappeared. The #mainContent and #whiteWrapper extend way below the #mainContent. On top of that, the changes from the span .subNavIndent on the LIs are not showing at all even though they are in FireFox.

man!

CSS:

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

html {
height:100%;
}

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

#outerWrapper {
margin:0 auto;
width: 950px;
height: 100%;
}

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

#rightShade {
margin: 0;
width: 23px;
height: 100%;
background:url(images/border-right.gif) repeat-y;
float:right;
}

#mainContent {
margin:0;
height:100%;
background-color: #f8dd8e;
}

* html #leftShade {
margin-right: -3px;
}

* html #rightShade {
margin-left: -3px;
}

#header {
width: 874px;
height: 116px;
background-image: url(images/header_02.jpg);
background-repeat: no-repeat;
margin: 0 auto;
}

#navDiv {
height: 30px;
}

#navDiv ul {
margin: 10px 0 0 0;
}

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

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

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

#whiteWrapper {
width: 874px;
margin:0 auto;
height:100%;
background: #FFFFFF;
}

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

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

.subNavIndent {
font: 11px;
text-transform: lowercase;
padding: 0 0 0 12px;
}

#bodyContent {
width:575px;
padding: 0 15px 0 0;
text-align:left;
float:right;
}

#footer {
height:40px;
clear:both;
}

<!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="test.css" rel="stylesheet" type="text/css" />
</head>
<body>

<div id="outerWrapper">

<div id="leftShade"></div>
<div id="rightShade"></div>
<div id="mainContent">
<div id="header"></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" /></div>

<div id="whiteWrapper">

<div id="subNav">
<ul class="subNavUl">
<li><a href="index.php">Home</a></li>
<li><span class="subNavIndent">Mission Statement</span></li>
<li><span class="subNavIndent">School Founder</span></li>
<li><span class="subNavIndent">Share Our Vision</span></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>
<p>&nbsp;</p>
</div>
<div id="bodyContent">
<h1>Contacts</h1>
<h2>USA Contacts</h2>
<p> stuff<br />
stuff<br />
stuff</p>
<p>stuff<br />
Chairman <br />
stuff<br />
<a href="stuff">stuff</a></p>
<p>stuff<br />
President<br />
stuff<br />
<a href="stuff">stuff</a></p>
</div>

<div id="footer">&copy;2008</div>

</div>

</div>

</div>

</body>
</html>

I intend that there will be different amounts of content on each page but I would like the colors of the #outWrapper to extend 100% of the page height.

Alas. Thanks for the help.

alt131




msg:3782872
 8:26 am on Nov 9, 2008 (gmt 0)

On the provided code, I'm not seeing the differences between ff2&3, ie6&7, Opera9 and winSafari that you are reporting, so my suggestions reflect that.

the changes from the span .subNavIndent on the LIs are not showing at all
Several things will help here:

  • Good that you moved the spans inside the <li's>, but important to keep validating when having troubles - font is short-hand, so to adjust size use font-size on .subNavIndent.
  • Be aware of specificity. ul.subNavUl li targets an li that is a child of a ul with the class of .subNavUl, while .subNavIndent applies to any old thing that has the same class name. As the first is more specific, it will over-ride the more general class.
  • I suggest simple mark-up, so remove the spans and just apply the class and styles direct to the li - <li class="subNavIndent">.
  • To deal with specificity, select ul.subNavUl li with just .subNavUl li, and .subNavIndent by li.subNavIndent
  • Another way would be to change ul.subNavUl li to #subNav li and .subNavIndent to #subNav .subNavIndent which itmore obvious they relate when reading the code.
  • If you must keep the span, select it via li span.subNavIndent to give it the same specificity as ul.subNavUl li

On a side-note, that
text-indent:-1.5em makes me wonder if you are overcoming the natural paddings/margins of <ul> and <li> by "pulling" the <li>'s "left-wards". Consider styling the highest level element (ul) and removing padding/margins so the majority <li>'s are positioned where you want them, then just class the specific <li>'s for the additional indent etc. This gives you more control, should reduce the amount of code, allows the browsers to get on with laying out the page rather than shoving <li>'s right and left ;) , and should make it easier to avoid specificity issues.

The #whiteWrapper is about 15px too narrow on each side. The #bodyContent Div has completely disappeared.
Unfortunately I just cannot see this at all - #bodycontent is visible and all widths are consistent cross-browser, and per the css. ;(

#whiteWrapper extends way below the #outerWrapper.

Per my earlier post, this is not really "extending". #whitewrapper is obeying the order to give itself the same height as the viewport. #whitewrapper begins lower down the page than #outerwrapper, so that height makes #whitewrapper "end" further down the page than #outerwrapper.

Alas.
Although frustrating, your layout can be achieved, but recall you are trying to order the user agent (browser) to draw the elements to the stated height - which is the height of the viewport, although what is really desired is to obey the stated height if the content is shorter than the viewport height, but ignore the stated height and make the elements taller if the content won't fit within the viewport. So the browser is expected to measure the content, and the viewport, and compare them, and obey the stated heights - sometimes - using css, which is a tool for styling elements in the document, not measuring browser chrome.

Thread #34 (2, 3, Multi Column CSS Templates and Layouts) in the forum library plus #33 (positioning a footer) will help.

Have fun - and keep at it ;)

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.
Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About
© Webmaster World 1996-2014 all rights reserved