Fri, 2008-08-22 17:57
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;
}
Fri, 2008-08-22 18:25
#1
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 
. Center the container with auto left and right margins (margin: 0 auto;)
Fri, 2008-08-22 18:42
#2
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?
Fri, 2008-08-22 19:15
#3
have you tested it with the
have you tested it with the removal of the center tag? It works fine in Firefox here.
Fri, 2008-08-22 19:21
#4
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}