height problems with css in Mozilla and Opera?

[Superbuis1]

The following StyleSheet works in IE 6, but not in Opera 7.23 and Mozilla 1.6. It seems to be a problem with the height: 100%, which is ignored by these browsers. <snip>

It moves all my divs to the top of the screen. Does anybody know about this issue and know if there is a solution? Perhaps use px size instead (something I don't prefer personally). I searched already in the forum, but I couldn't find a useful solution so that's why I post this issue....

My general approach for the website is:
a body of 98% (because of some IE toolbars that use some page space)
a heading of 5% (kop OR inlogKop)
a content of 90% that can contain several divs)
a footer of 5%

The StyleSheet (sorry for the Dutch naming of the divs and the comments) :)

body
{
background-color: white;
color: black;
font-family:'Times New Roman',Verdana,Tahoma,Arial,sans-serif;
font-size:12pt;
margin: 0px;
height: 98%; /* ivm werkbalken enzo niet volle 100% beschikbaar */
}

#kop
{
width: 100%;
height: 5%;
clear: both;
font-size: 26pt;
font-weight: bold;
background-color: rgb(154,152,244);
}

#inlogKop /* ivm geen aanwezige subkop: scheidingslijn mist */
{
width: 100%;
height: 5%;
clear: both;
font-size: 26pt;
font-weight: bold;
background-color: rgb(154,152,244);
border-bottom-style: groove;
border-bottom-color: silver;
border-bottom-width: medium;
}

#content
{
width: 100%;
height: 90%;
clear: both;
}

.subKop
{
width: 100%;
height: 20pt;
padding-top: 4px;
background-color: rgb(255,255,204);
border-top-style: groove;
border-top-color: silver;
border-top-width: medium;
border-bottom-style: solid;
border-bottom-color: silver;
border-bottom-width: 1px;
text-align: center;
font-weight: bold;
}

#inlog { clear: both; float: left; width: 50%; margin-top: 200px; margin-left: 20%;}
#klantL { clear: left; float: left; width: 45%; margin-top: 8px; margin-left: 6px; }
#klantR { clear: right; float: left; width: 45%; margin-top: 8px; }

#losadressen { clear: both; float:left; width: 50%; margin-top: 8px; margin-left: 22%; }

#artikelTabel
{
clear: left;
float: left;
width: 62%;
margin-top: 8px;
margin-left: 20px;
margin-right: 20px;
padding: 0px;
border: 1px solid silver;
}

#artTabelKop
{
text-align: left;
font-weight: bold;
margin: 0px;
}

#artTabelBody
{
border-collapse: collapse;
margin: 0px;
text-indent: 3px;
}

.breed { width: 35%; }
.smal { width: 13%; }
.smalC { width: 13%; text-align: center; }

#artikelKnoppen
{
clear: right;
float: left;
width: 25%; /* zou eigenlijk 38% moeten zijn, maar margin gaat van width af */
margin-top: 8px;
margin-left: 20px;
margin-right: 20px;
}

.midden {clear: none; float: left; width: 8%; }
.regel { clear: both; padding: 2px; }
.label { float: left; width: 100px; text-align: left; }
.labelRechts {width: 100px; }
.dp /* Dubbele punt */
{
width: 2px;
text-align: center;
}
.tekstbox { float: left; text-align: left; }

#voet
{
width: 100%;
height: 5%;
border-top-style: groove;
border-top-color: silver;
border-top-width: medium;
background-color: rgb(154,152,244);
font-size: 10pt;
font-style: italic;
}

a
{
color: blue;
text-decoration: underline;
}

input, textarea
{
border-style: solid;
border-color: silver;
border-width: 1px;
font-size: 10pt;
outline: none;
/* -moz-outline: none; */
}

input.stuur
{
float: left;
width: 80px;
height: 25px;
font-size: 12pt;
}

input.drukaf
{
float: right;
width: 80px;
height: 25px;
font-size: 12pt;
}

input.single
{
float: left;
width: 80px;
height: 25px;
font-size: 12pt;
margin-top: 15px;
margin-left: 70px;
}

input.radio
{
margin-right: 8px;
}

select
{
background-color: rgb(154,152,244);
}

p.indent
{
text-indent: 40px;
}

.center { text-align: center; }
.left { text-align: left; }
.right { text-align: right; }

[edited by: SuzyUK at 11:56 pm (utc) on June 14, 2004]
[edit reason] URL snip [/edit]

[isitreal]

You have to set html also, not just body, like this:

body, html {
height:98%;
}

[Superbuis1]

Thank you for your reply. I also tried this before (and tested it again :)), but that doesn't work either... Or should the div body, html {} only contain a heigth and nothing else (like colors and fonts)? Didn't try that...

[isitreal]

I'm not certain on this, but your kop top thing and your content div might need to have position: relative added, it's hard to say.

Floating creates headaches, have you thought about just absolutely positioning the elements, using your same percent coordinates, that will work fine unless the page scrolls below the browser window.

[Superbuis1]

Thanks again. I've added position:relative to the header, content and footer div. Doesn't work either... position:absolute is not an option because my pages (not the example one) can scroll down the explorer window. Is this such a rare problem where no one ran into before? :)

[isitreal]

No, it's not a rare problem when trying to make a div page where the cells are trying to act like table cells, these forums are filled with problems like that. I would estimate, at least from my experience, that the time it takes to create a new div type layout for a basic table type structure can be up to 10 times longer, and always less stable, than using a table to make that table structure, where cells and rows interact with each other:

read this little thread by purplemartin:
[webmasterworld.com...]

This is pretty much right on, except for you don't have to pick either div or table, just use the tags that work best for the job, just like a carpenter does, he doesn't worry about what is the 'right' tool, he uses the tool he knows is best for the job, based on his experience. Note that if you had started with a table you would have been done long ago, and onto doing something much more interesting (hopefully at least) than debugging div CSS code.

[Superbuis1]

:) The fact is that I started with tables. A demand of my boss at that time. But it worked out that for example Mozilla and Opera tread tables in another way as well, i.e. border things and positioning. So I switched to CSS instead where things are more maintainable in my opinion (at least when it all works fine :))

Let's put it in another way then. Is there a good solution using css if you don't know the window size and you want to use at least the complete window (heading at top, content in the middle, footer at the bottom). So if there will be more text, the sroll down bar will appear and the bottom moves downwards. Of course this should work in several browsers :) I got it already working in IE :)

[isitreal]

The footer thing is the problem when you do it that way.

Although I think if you get the position:relative; stuff right, this basic structure should at least theoretically work:

top
content - position relative
content divs, either floated or positioned in reference to only the content div, not the page
footer

that is, if each div is just positioned, stacked on top of each other