4 replies [Last post]
imhotep
Offline
newbie
Tampa, FL
Last seen: 10 years 46 weeks ago
Tampa, FL
Timezone: GMT-5
Joined: 2008-08-15
Posts: 5
Points: 0

My goal here is to get a DIV with right and left borders to extend the entire vertical distance of the browser window. Before you jump on my case, I've already read the How-To article on 100% Height. I have followed the code in that article and it does not produce the same results when I load a simple page containing the suggested code. In addition there are several pieces of code that appear to be needless.

For example, the article states that you must enter 'height:100%' in both the html and body tags of your CSS as well as in the container div. It predictst that doing so will yield the proper result in FF but NOT in IE7. This is actually backwards. I did so and it works just fine in IE7 but not in FF. As per the following quote from the article:

Load it up. What do you notice? IE7 fails. Typical!

....no, actually IE7 displays exactly what I want whereas FF doesn't.

The article also tells you to use 'display:table' for non-IE browsers. The only result that I get from doing this is that FF no longer recognizes my tag in the html and shifts everything over to the right. This is unacceptable.

Then the article tells you to use 'position:relative' because quote "let's be nice to IE". Well, if I remove this code nothing negative happens in IE. It has no bearing on whether IE7 displays the 100% height correctly.

Again, my results with IE7 and FF are opposite of this 'How-To' article. How can I get both IE7 and FF to validate 100% height properly?

Here is my HTML, nothing fancy here.

Pixels Above - Photography by Curt Walker

Here is the CSS:

html, body{height: 100%;
margin: 0;
padding: 0;
}

body{background-color: #000000;
margin-top:0px;
font-family:arial;
font-size:10pt;
color:#cccccc;
}

#container{height:100%;
width:800px;
position:relative;
border-style:solid;
border-color:#555555;
border-width: 0px 1px 0px 1px
}

ul{list-style-type:none;
margin: 0px 0px 0px 0px;
}

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 6 years 23 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

well, for starters you

well, for starters you should remove the ancient center tags and center with a method more modern. I think I fell off my dinosaur the last time I used a center tag Wink . Center the container with auto left and right margins (margin: 0 auto;)

imhotep
Offline
newbie
Tampa, FL
Last seen: 10 years 46 weeks ago
Tampa, FL
Timezone: GMT-5
Joined: 2008-08-15
Posts: 5
Points: 0

wolfcry, thanks for the tip.

wolfcry, thanks for the tip. I did as you say and it works fine. I will continue to use this rather than the center tag.

Any ideas on the 100% height problem?

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 6 years 23 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

have you tested it with the

have you tested it with the removal of the center tag? It works fine in Firefox here.

imhotep
Offline
newbie
Tampa, FL
Last seen: 10 years 46 weeks ago
Tampa, FL
Timezone: GMT-5
Joined: 2008-08-15
Posts: 5
Points: 0

Update: this is very

Update: this is very strange. I added some code to govern the list items and suddenly 100% height started working. Is this a bug of some sort?

My new HTML (now lacking the tag is as follows:

Pixels Above - Photography by Curt Walker

My new CSS is as follows:

html, body{height: 100%;
margin: 0;
padding: 0;
}

body{background-color: #000000;
margin-top:0px;
font-family:arial;
font-size:10pt;
color:#cccccc;
}

#container{margin: 0 auto;
height:100%;
width:800px;
position:relative;
border-style:solid;
border-color:#555555;
border-width: 0px 1px 0px 1px
}

ul{list-style-type:none;
margin: 0px 0px 0px 0px;
}

#nav li {display:inline}