Forum Moderators: not2easy
For the past few days on and off I've been working on getting a layout with a 100% div height to display right in explorer and firefox. Now I'm stuck in a pretty amusing situation (I thought it was funny). I had the doctype set to Transitional and it worked perfect in firefox but explorer stopped the div once all the content was displayed which is right now about half the page. I finally decided to play around with the doctype and changed it to strict. Finally it looked perfect in explorer! Of course firefox now displays the exact same problem that explorer did. I have no idea what to do now. My html and CSS is validated
Here is my html and css code
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
<title>Page Title</title>
<link href="css.css" rel="stylesheet" type="text/css">
</head>
<body><div align="center"><div id="main">
<div id="links"><a class="nav_links" href="index.php">Home</a> <a class="nav_links" href="search.php">Search</a> </div>
<div id="left_content"><div id="lt_spacer"></div>
Content Goes Here<br>
</div><div id="rt_box"><div id="rt_spacer"></div>
<div id="green_box"><div id="gb_left_repeat"><div id="gb_top"><div id="gb_bot"></div></div></div></div>
Right Box Content<br><a href="members/index.php">Login</a>
</div><div id="header">
<div id="h_top"><div id="h_left"><div id="top_banner">Content</div>
<div id="h_right"><div id="h_bot">
</div></div></div></div></div></div></div>
</body>
</html>
CSS
body { color: #333; font-size: 11px; font-family: Verdana; background-image: url("images/back.jpg"); background-repeat: repeat-y; background-position: center 0; text-align: center; margin: 0; width: 100%; height: 100%; min-height: 100%; max-height: 100%; overflow: auto }
html { color: #333; font-size: 11px; font-family: Verdana; background-image: url("images/back.jpg"); background-repeat: repeat-y; background-position: center 0; text-align: center; margin: 0; width: 100%; height: 100%; min-height: 100%; max-height: 100%; overflow: auto }
#links { color: #464646; font-size: 11px; font-family: Verdana; text-decoration: none; background-image: url("images/link_repeat.gif"); background-repeat: repeat-x; text-align: left; letter-spacing: 1px; padding-top: 12px; position: absolute; z-index: 0; top: 204px; width: 556px; height: 37px }
#main { text-align: left; width: 770px; height: 100%; min-height: 100%; max-height: 100% }
#rt_box { background-image: url("images/rt_bar_rep.gif"); background-repeat: repeat-y; background-position: right 0; z-index: 1; width: 213px; height: 100%; min-width: 184px; min-height: 100%; max-width: 148px; max-height: 100%; float: right }
#rt_spacer { width: 189px; height: 205px }
#left_content { text-align: left; padding-left: 15px; position: absolute; z-index: 0; width: 540px; height: auto }
#lt_spacer { width: 555px; height: 250px }
#green_box { background-color: #a1bf0f; background-image: url("images/gb_top_repeat.gif"); background-repeat: repeat-x; margin-top: -1px; width: 213px; height: 167px; float: right; border-right: 1px solid #072950 }
#gb_content { z-index: 54; width: 205px; height: 155px; float: right }
#gb_top { background-image: url("images/gb_1.jpg"); background-repeat: no-repeat; width: 103px; height: 37px; float: left }
#gb_left_repeat { background-image: url("images/gb_left_repeat.gif"); background-repeat: repeat-y; width: 9px; height: 100%; float: left }
#gb_bot { background-image: url("images/gb_bot.gif"); background-repeat: no-repeat; position: relative; top: 162px; width: 213px; height: 8px }
#header { background-image: url("images/h_right.jpg"); background-repeat: no-repeat; background-position: 750px 11px; text-align: center; position: absolute; z-index: 99; top: 0; width: 770px; height: 205px }
#h_right { background-image: url("images/h_right.jpg"); background-repeat: no-repeat; z-index: 99; left: 749px; width: 21px; height: 92px }
#h_left { background-image: url("images/h_left.jpg"); background-repeat: no-repeat; background-position: left top; display: block; position: relative; top: 11px; width: 21px; height: 92px }
#h_top { background-image: url("images/h_top.jpg"); background-repeat: no-repeat; margin: 0; padding: 0; width: 770px; height: 12px }
#h_bot { background-image: url("images/h_bot.jpg"); background-repeat: no-repeat; width: 770px; height: 103px }
#top_banner { background-color: #fff; margin: 0 0 0 21px; padding: 0; position: relative; width: 728px; height: 90px }
The only difference between it working in firefox and internet explorer is <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> for fire fox
and <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN"> for explorer.
If you have any suggestions, please let me know.
Thank you for your time.
Any suggestions?
