Mon, 2009-07-13 16:01
Hello All
Can anybody explain why in ie6 the footer covers up the border of the containing div, if i re-size the window it re-appears but goes again upon a refresh.
ok in firefox.
many thanks, all advice most welcome.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en-US" xml:lang="en-US"> <head> <title>Untitled Document</title> <link rel="stylesheet" type="text/css" href="server_mon_style.css" /> <script src="JS.js" type="text/javascript"></script> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> </head> <body> <div id="container"><div id='banner'><h1>Server Monitoring Tool</h1></div><div id='nav'><p>Select Options</p><form method="post" action="/MAIN1.cgi" enctype="multipart/form-data"> <input type="button" tabindex="1" name="1. Select Graph Type" value="1. Select Graph Type" onclick="document.location = "MAIN1.cgi"" /><br /><br /><div></div></form><form method="post" action="/MAIN1.cgi" enctype="multipart/form-data"> <input type="button" tabindex="2" name="2. Select Servers" value="2. Select Servers" onclick="document.location = "MAIN2.cgi"" /><br /><br /><div></div></form><form method="post" action="/MAIN1.cgi" enctype="multipart/form-data"> <input type="button" tabindex="3" name="3. Select Parameters" value="3. Select Parameters" onclick="document.location = "MAIN3.cgi"" disabled="disabled" /><br /><br /><div></div></form><form method="post" action="/MAIN1.cgi" enctype="multipart/form-data"> <input type="button" tabindex="4" name="4. Select Graph Feature" value="4. Select Graph Feature" onclick="document.location = "MAIN4.cgi"" disabled="disabled" /><br /><br /><div></div></form><form method="post" action="/MAIN1.cgi" enctype="multipart/form-data"> <input type="button" tabindex="5" name="5. Draw Graph" value="5. Draw Graph" onclick="document.location = "MAIN5.cgi"" disabled="disabled" /><br /><br /><div></div></form><form method="post" action="/MAIN1.cgi" enctype="multipart/form-data"> <input type="button" tabindex="6" name="6. Display Data" value="6. Display Data" onclick="document.location = "MAIN6.cgi"" disabled="disabled" /><br /><br /><div></div></form></div><div id='content'>This is under the content div<h1>Select the graph type</h1><form method="post" action="MAIN2.cgi" enctype="multipart/form-data" onsubmit="return validate()" name="checkbox_form"> <label><input type="radio" name="oneormany" value="single" checked="checked" tabindex="7" />single</label><label><input type="radio" name="oneormany" value="many" tabindex="8" />many</label><p /><input type="submit" tabindex="9" name=".submit" /><div><input type="hidden" name=".cgifields" value="oneormany" /></div></form></div><div id='history'><h2>Selected options</h2><span class='historytitle'>Selected Graph Type <span class='historyresult'>single </span>Selected Servers<span class='historyresult'> </span>Selected Parameters<span class='historyresult'> </span>Specific Parameters<span class='historyresult'></span></span></div><div id='footer'>Footer stuff here</div></div> </body> </html>
Stylesheet
* {margin:0;padding:0} #body { margin: 0; padding: 0; color: #000; background-color: #8e8f27; } #footer { position:relative; bottom:-32px; clear:both; background-color: #CCCCCC; text-align: center; width:100%; border-top: 1px solid #333; z-index:-1; zoom:1; } #content { float:left; padding-top: 10px; padding-bottom: 5px; padding-left: 30px; border: 1px solid #333; position: relative; left:29px; width:340px; overflow: auto; height:70%; background-color: #99CCCC; } #nav { float: left; width: 220px; position:relative; left:30px; padding-top: 10px; padding-bottom: 5px; padding-left: 10px; border: 1px solid #333; height:70%; overflow: auto; } .historytitle { text-align:center; display:block; font-size: 17px; color: black; background-color: blue; } .historyresult { display:block; font-size: 14px; text-align:left; background-color: red; } #banner { margin: 0; padding: 5px; } #container { width:900px; height:25em; position : relative; left:30px; top: 60px; background-color: #669999; /*overflow: hide;*/ border: 1px solid #333; z-index:1; } #history { padding-top: 10px; padding-bottom: 5px; float :left; width:205px; position:relative; left: 28px; border: 1px solid #333; overflow: auto; height:70%; }