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

Everything in the outer container diapears in IE

&nbsp

Cienwen

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

alt131

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

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.

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)

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.