Here is my CSS code: /*BASE LAYOUT FOR ALL PAGES*/ a { border: 0; outline: none; color: #ffc000; } h1 { color: #fff; margin-top: 0px; margin-bottom: 0px; font-size: 12px; font-family: Arial, Sans serif; font-weight: normal; display: inline; } html, body { height: 100%; margin: 0px; padding: 0px; } body { background: url(images/background.gif) repeat-y center 0; margin: 0px; padding: 0px; } #container { margin: 0px auto; border: #f38903 2px solid; border-bottom: 0px; border-top: 0px; width: 798px; height: 100% } #header { background: url(images/header.gif) no-repeat; margin: 0px auto; width: 798px; height: 171px; margin-top: 0px; padding: 0px; border-right: #f38903 2px solid; border-left: #f38903 2px solid; } #content { background: url(images/contentbg.gif) #0c0c0c; height: 100%; } #footer { background: #0a0a0a; height: 30px; width: 798px; font-family: Arial, sans serif; font-size: 10px; color: #333333; text-align: center; position: absolute; bottom: 0px; margin-top: 10px; } /* STOP! NAVBAR TIME!*/ #navbar { list-style: none; margin: 0px auto; width: 798px; height: 49px; padding: 0px; border-right: #f38903 2px solid; border-left: #f38903 2px solid; } #navbar li { list-style: none; display: inline; } /*Navbar Button Properties, Includes specific width, do not alter*/ #navbar .home a { width: 157px; background: url(images/home.gif) no-repeat; float: left; margin-left: 0px; padding: 0; height: 49px; } #navbar .1 a { width: 158px; background: url(images/1.gif) no-repeat; float: left; margin-left: 0px; padding: 0; height: 49px; } #navbar .12 a { width: 160px; background: url(images/12.gif) no-repeat; float: left; margin-left: 0px; padding: 0; height: 49px; } #navbar .123 a { width: 156px; background: url(images/123.gif) no-repeat; float: left; margin-left: 0px; padding: 0; height: 49px; } #navbar .1234 a { width: 158px; background: url(images/1234.gif) no-repeat; float: left; margin-left: 0px; padding: 0; height: 49px; } #navbar .break { background: url(images/break.gif) no-repeat; width: 2px; height: 49px; float: left; margin-left: 0px; padding: 0; } #navbar .break_1 { background: url(images/break.gif) no-repeat; width: 1px; height: 49px; float: left; margin-left: 0px; padding: 0; } /*Navbar Hover (Mouseover) Code*/ #navbar .home a:hover { background-position: -157px; } #navbar .1 a:hover { background-position: -158px; } #navbar .12 a:hover { background-position: -160px; } #navbar .123 a:hover { background-position: -156px; } #navbar .1234 a:hover { background-position: -158px; } /*NAVBAR END*/ Code (markup): Instead of the page ending, it just keeps continuing. Here is the screenshot of the site.
Here is the XHTML code: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="description" content="#"/> <title># | #</title> <link rel="stylesheet" type="text/css" href="redobase.css"/> </head> <body> <div id="header"> </div> <ul id="navbar"> <li class="home"> <a href="index.htm"></a></li> <li class="break"></li> <li class="#"> <a href="#"></a></li> <li class="break"></li> <li class="#"> <a href="#"></a></li> <li class="break"></li> <li class="#"> <a href="#"></a></li> <li class="break"></li> <li class="blog"> <a href="/blog/"></a></li> <li class="break_1"></li> </ul> <div id="container"> <div id="content"> f </div> </div> </body> </html> Code (markup): I realize that the <header> is not inside the container, but when I placed it inside, my webpage would set to a certain height, and when the screen resolution height was above that, it would show a large black space.
I will be offline until 5pm est tomorrow so I will be unable to answer any questions. I attempted to put the header <div> inside of the container, then change a few CSS rules, but it resulted in this: The yellow border on the left and right is part of the <container> div. Now I realize the problem. The gap being left is 220px in height, the height of the navbar & the header. Somehow, the <header> and <navbar> divs are pushing the content div down. If I set the margin of the content div to -220px, and it's z-index to 2, then the page correctly stops at the bottom of the browser, however, my content background is in the wrong place. There must be another fix.
Still unfixed, someone must know what's wrong! Here is my updated XHTML (without the structure tags) <div id="container"> <div id="header"> </div> <ul id="navbar"> <li class="home"> <a href="index.htm"></a></li> <li class="break"></li> <li class="gold"> <a href="gold/"></a></li> <li class="break"></li> <li class="leveling"> <a href="leveling/"></a></li> <li class="break"></li> <li class="strategy"> <a href="strategy/"></a></li> <li class="break"></li> <li class="blog"> <a href="/blog/"></a></li> <li class="break_1"></li> </ul> <div id="content"> </div> </div> Code (markup): and here is my updated CSS *BASE LAYOUT FOR ALL PAGES*/ a { border: 0; outline: none; color: #ffc000; } h1 { color: #fff; margin-top: 0px; margin-bottom: 0px; font-size: 12px; font-family: Arial, Sans serif; font-weight: normal; display: inline; } html, body { margin: 0px; padding: 0px; height: 100% } body { background: url(images/background.gif) repeat-y center 0; margin: 0px; padding: 0px; } #container { margin: 0px auto; border: #f38903 2px solid; border-top: 0px; border-bottom: 0px; width: 798px; height: 100%; } #header { background: url(images/header.gif) no-repeat; width: 798px; height: 171px; margin-top: 0px; padding: 0px; } #content { background: url(images/contentbg.gif) no-repeat #0c0c0c; min-height: 100%; height: 100%; } #footer { background: #0a0a0a; height: 30px; width: 798px; font-family: Arial, sans serif; font-size: 10px; color: #333333; text-align: center; position: absolute; bottom: 0px; margin-top: 10px; } /* STOP! NAVBAR TIME!*/ #navbar { list-style: none; margin: 0px auto; width: 798px; height: 49px; padding: 0px; } #navbar li { list-style: none; display: inline; } /*Navbar Button Properties, Includes specific width, do not alter*/ #navbar .home a { width: 157px; background: url(images/#.gif) no-repeat; float: left; margin-left: 0px; padding: 0; height: 49px; } #navbar .gold a { width: 158px; background: url(images/#.gif) no-repeat; float: left; margin-left: 0px; padding: 0; height: 49px; } #navbar .leveling a { width: 160px; background: url(images/#.gif) no-repeat; float: left; margin-left: 0px; padding: 0; height: 49px; } #navbar .strategy a { width: 156px; background: url(images/#.gif) no-repeat; float: left; margin-left: 0px; padding: 0; height: 49px; } #navbar .blog a { width: 158px; background: url(images/blog.gif) no-repeat; float: left; margin-left: 0px; padding: 0; height: 49px; } #navbar .break { background: url(images/break.gif) no-repeat; width: 2px; height: 49px; float: left; margin-left: 0px; padding: 0; } #navbar .break_1 { background: url(images/break.gif) no-repeat; width: 1px; height: 49px; float: left; margin-left: 0px; padding: 0; } /*Navbar Hover (Mouseover) Code*/ #navbar .home a:hover { background-position: -157px; } #navbar .# a:hover { background-position: -158px; } #navbar .# a:hover { background-position: -160px; } #navbar .# a:hover { background-position: -156px; } #navbar .blog a:hover { background-position: -158px; } /*NAVBAR END*/ Code (markup): The image in the post preceding this one is the result of these two sets of code.