Forum Moderators: not2easy

Message Too Old, No Replies

CSS problem with height:100% in Mac Opera and Netscape

CSS problem with height:100% in Mac Opera and Netscape

         

angieb

5:29 pm on Apr 24, 2005 (gmt 0)



Hi,

Does anyone know how why Netscape and Opera on mac only doesn't like the height set to 100% on an overall container div?

To see what I mean this is the page:

<Sorry, no personal URLs.
See Terms of Service [webmasterworld.com]>

It works fine on all other browsers that I have tested it on, but it's just on Netscape and Opera for Mac that the white background doesn't show up behind all 3 columns.

Any ideas?

cheers
Angie

[edited by: tedster at 7:48 pm (utc) on April 24, 2005]

SuzyUK

9:08 am on Apr 30, 2005 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Hi angieb - Welcomer to WebmasterWorld!

don't have an a mac to test this on, but have you got height 100% set on both the <HTML> and <BODY> elements, and is the wrapper a direct child of these elements? (inheritance needs to follow the document structure precisely) and what doctype are you using?

<html>
..<body>
....<wrapper>

I think IE/Mac has an issue if height 100% is set on the <html> element but you can hide it from it using a hack.

Suzy

angieb

1:26 pm on May 4, 2005 (gmt 0)



Hi,

The height:100% is only on a div which contains 3 other divs. I am trying to do a 3 column layout which all have a container div which provides a white background.

I don't mind if it doesn't go all the way to the bottom of the page, but it needs to encompass all of the columns.

The doctype is:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

Cheers
Angie

Stormfx

6:08 pm on May 4, 2005 (gmt 0)

10+ Year Member



As Suzy mentioned, you need to set the <html> and <body> tags to 100% height via CSS. Remember that elements inherit their parents' attributes. Try placing this in the head of your document:

<style type="text/css">
<!--
body,html {
height: 100%;
}
-->
</style>