Welcome to WebmasterWorld Guest from 54.163.35.238

Forum Moderators: not2easy

Message Too Old, No Replies

Container Div expands way below it's container Div in FireFox

Everything in the outer container diapears in IE

     

Cienwen

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

5+ Year Member



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

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

WebmasterWorld Senior Member 5+ Year Member



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

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

5+ Year Member



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

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

WebmasterWorld Senior Member 5+ Year Member



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 ;)

 

Featured Threads

Hot Threads This Week

Hot Threads This Month