DIV height 100% Netscape problems

nop7gep8 · Jan 30, 2005

Hello,
I'm trying to make my design consistent across various browsers and I can't get a page to display properly with Netscape.

Here's my general div layout:

<html>
<body>
<div containter>
<div header></div>
<div content></div>
<div footer></div>
</div>
</body>
</html>

You may view the html source here:

http://www.jonherrity.com/pictures.html

It displays "correctly" (the way I want it to) in IE6, but not in Netscape 7.2.
By correctly, I mean:

<div container> (light gray color) spans entire browser window & the <div footer> follows the bottom of the window but does not get in the way of the <div content>.

I've fooled around with the div position properties (relative vs. absolute) too many times to count, and I can't seem to get the height properties correct either...

Here is my CSS code:

* {
margin : 0;
padding : 0;
}

html, body {
font: 16px verdana, arial, helvetica, sans-serif;
background : #333333 top center;
text-align : center; /* That Explorer Malarkey */
*/height: 100%;*/
}

#container {
position: relative;
width: 700px;
margin: 0 auto;
text-align: left;
background: #999999 /*0 51px*/;
border-right: solid 1px #fff;
border-left: solid 1px #fff;
height: 100%;
}

#decoration {
position: absolute;
left: 15px;
top: 260px;
background: url(stripe2.gif) repeat-y;
width: 30px;
height: 200px;
}

#content {
position: relative;
top: -30px;
left: 20px;
width: 640px;
/*height: 100%;*/
}

#menu {
float: right;
font: 16px arial;
width: 160px;
height: 160px;
margin: 0 0 15px 15px;
padding: 15px 25px 15px 25px;
background-color: #CCFFCC;
border: 1px solid #000;
line-height: 18px;
}

#menu a img {
height: 0;
width: 0;
border-width: 0;
}

#menu a:hover img {
position: absolute;
top: 70px;
left: 550px;
height: 50px;
width: 50px;
}

#menu a:hover {
text-decoration: none;
background-color: #E6FFCC;
}

a {
color: #000000;
}

a:link {
color: #000099;
text-decoration: underline;
}

a:visited {
color: #333333;
text-decoration: none;
}

a:active {
text-decoration: none;
}

#content h2 p a:hover {
color: #000099;
background-color: #CCCC99;
}

#header {
width: 700px;
height: 240px;
background: url(guinness3.jpg) no-repeat;
text-indent: -5000px;
}

#footer {
position: absolute;
bottom: 0px;
right: 0px;
width: 100%;
font-size: 10px;
text-align: center;
padding-top: 20px;
/*z-index: 3;*/
/*overflow: auto;*/
}

p {
font-size: 12px;
padding: 10px 20px 10px 40px;
/*text-indent: 20px;*/
}

.indent {
text-indent: 20px;
}

.firstp {
padding-top: 45px;
}

h1 {
font: italic 14pt arial;
margin-left: -10px;
color: #000066;
}

h2 p{
font-weight: normal;
font-size: 14px;
line-height: 18px;
}

/* same as tt */
h3 {
font: italic bold 12pt arial;
color: #000033;
text-indent: -10px;
border-bottom: dotted 1px;
}

#menu tt {
font: italic bold 12pt arial;
border-bottom: dotted 1px;
text-decoration: none;
}

Thank you in advance!!
I hope someone can help...

nop7gep8 · Jan 30, 2005

I'm sorry; my CSS code has a minor mistake:

html, body {
font: 16px verdana, arial, helvetica, sans-serif;
background : #333333 top center;
text-align : center; /* That Explorer Malarkey */
*/height: 100%;*/
}

should have been:

html, body {
font: 16px verdana, arial, helvetica, sans-serif;
background : #333333 top center;
text-align : center; /* That Explorer Malarkey */
height: 100%;
}

nop7gep8 · Jan 31, 2005

I'm sorry if my question was a bit vague..

If you resize your your window so it's small in the vertical direction & then refresh the page in netscape & begin scrolling downward, you lose the background of the <div container> element, and it looks ugly.

Is there a way to fix this while maintaining the same functionality in IE 6?

Also, the <div footer> passes right over the other elements as you resize the window vertically in Netscape 7.2, which is not what I want either.

Everything looks fine in IE 6 though!

cLFlaVA · Jan 31, 2005

If you do a search on this forum for height 100%, you'll find a miriad of posts, all telling you that height:100% is not valid CSS if there is no static height parent element.

Since the body tag (and html tag) do not have parent elements (with specific heights set), 100% is not valid CSS, and therefore I will assume you're not even using a complete doctype.

*cLFlaVA
----------------------------
[tt]tastes great, less filling.[/tt]
[URL unfurl="true"]http://www.coryarthus.com/[/url]

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

DIV height 100% Netscape problems

nop7gep8

Technical User

nop7gep8

Technical User

nop7gep8

Technical User

cLFlaVA

Programmer

Similar threads

Part and Inventory Search

Sponsor