but problem remains in chorme
Which page are you referring to?
Can you post a fresh link so that we are all looking at the same page 
If you are referring to the page Ryan linked to above then it seems to be broken in all browsers again at the bottom of the page.
You have lost the closing div to #wrapper and therefore the 100% height is not maintained and the page collapse. there should be one more closing div above the footer (validate frequently to avoid these silly errors).
Neither have you added the fix for IE6 that I have mentioned several times so IE6 will still be broken.
IE6 fix
#wrapper {
margin:auto;
width:1280px;
min-height:100%;
margin-top:-20px;
overflow:hidden;
}
[B]* html #wrapper{height:100%}[/B]
The corner routine (which I have already revised several times now) is not robust enough and you need something like this which revises the method completely and allows it to work cross browser.
[B].base{
width:1050px;
height:22px;
position:relative;
top:12px;
clear:both;
z-index:99;
float:left;
}
* html .base {float:none}
*+html .base{float:none}
.base b {
background:url(http://www.ammardesigns.com/sandbox/images/ll-right.jpg) no-repeat 0 0;
width:12px;
height:22px;
margin-left:-12px;
float:left;
position:relative;
}
.base span {
background:url(http://www.ammardesigns.com/sandbox/images/lr-light.jpg) no-repeat 0 0;
width:12px;
height:22px;
float:right;
margin-right:-12px;
position:relative;
}
[/B]
<td width="20"> </td>
</tr>
</table>
<!-- </form>-->
</form>
[B] <div class="base"><b></b><span></span></div>[/B]
</div>
</div>
</div>
<div class="footer"></div>
</html>
That is tested working in IE6 - 8, safari,ff and chrome.
Here is the whole page I was working with.
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Telecompass</title>
<script language="JavaScript" src="http://www.ammardesigns.com/sandbox/pm/scripts/calendar_us.js"></script>
<link rel="stylesheet" href="../scripts/calendar.css">
<script type="text/javascript">
// Popup window code
function newPopup(url) {
popupWindow = window.open(
url,'popUpWindow','height=400,width=900,left=0,top=0,resizable=yes,scrollbars=yes,toolbar=yes,menubar=no,location=no,directories=no,status=yes')
}
</script>
<script type="text/javascript" language="javascript">
function validFields(addschedule){
var error = false;
var message = "";
var d = new Date();
var curr_date = d.getDate();
var curr_month = d.getMonth();
curr_month++;
var curr_year = d.getFullYear();
var dt = curr_month+'/'+curr_date+'/'+curr_year;
var date = document.addschedule.txtDate.value;
//alert(date+'--'+dt);
if(date == ""){
message += 'Please select date.\
';
error = true;
}
if(date < dt){
message += 'The date should be current or next date.\
';
error = true;
}
if(document.addschedule.DrpPMtype.value == 0){
message += 'Select PM Type.\
';
error = true;
}
if(document.addschedule.DrpTeam.value == 0){
message += 'Select PM Team.\
';
error = true;
}
if(error){
alert(message);
return false;
}else{
return true;
}
}
</script>
<style type="text/css">
@charset "utf-8";
/* CSS Document */
ul li a {
color:#FFFFFF;
text-decoration:none;
}
html, body {
margin:auto;
height:100%;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
}
#wrapper {
margin:auto;
width:1280px;
min-height:100%;
margin-top:-20px;
overflow:hidden;
}
* html #wrapper {
height:100%
}
.outer {
width:1074px;
float:right;
}
#header {
width:1280px;
height:34px;
background:url(http://www.ammardesigns.com/sandbox/images/header.png) repeat-x;
border-top:20px solid #fff;
}
.MainNav {
color:#FFFFFF;
padding:0px;
margin:0px;
padding-top:5px;
text-decoration:none;
width:500px;
padding-left:150px;
}
.MainNav a {
color:#c9c8c5;
padding:0px;
margin:0px;
padding-top:5px;
text-decoration:none;
}
.MainNav a:hover {
color:#c9c8c5;
padding:0px;
margin:0px;
padding-top:5px;
text-decoration:underline;
}
.SubNav {
color:#ffffff;
float:right;
color:#FFFFFF;
margin-top:-15px;
}
.SubNav a {
color:#ffffff;
padding-right:50px;
padding-top:5px;
float:right;
color:#FFFFFF;
text-decoration:none;
}
.SubNav a:hover {
color:#FFFFFF;
padding-right:50px;
padding-top:5px;
float:right;
color:#FFFFFF;
}
.submenu {
width:150px;
float:left;
clear:left;
padding-top:20px;
display:inline;
;
margin-left: 20px;
}
.dynamic {
background-color:#0066a4;
float:right;
width:1072px;
margin-bottom:10px;
margin-top:20px;
}
.dynamic-light {
background-color:#FFFFFF;
float:right;
width:1050px;
height:600px;
margin-top:-22px;
border:12px solid #3ca2d3;
padding-left:-20px;
}
.genset-box {
background-color:#FFFFFF;
float:right;
width:1050px;
height:500px;
margin-top:-22px;
border:12px solid #3ca2d3;
padding-left:-20px;
}
.search-box {
background-color:#FFFFFF;
float:right;
width:1050px;
height:250px;
margin-top:-22px;
border:12px solid #3ca2d3;
padding-left:-20px;
}
.result-box {
background-color:#FFFFFF;
float:right;
width:1040px;
margin-bottom:10px;
border:12px solid #0066a4;
padding-left:9px;
margin-left: 0px;
}
#tabholder {
width:auto;
height:30px;
overflow:hidden;
margin:0;
padding:0;
list-style:none;
padding-left:37px;
padding-top:55px;
}
#tabholder li {
float:left;
margin:0 10px 0 0;
}
#tabholder li a {
background:#b2b2b2 url(http://www.ammardesigns.com/sandbox/images/left-inactive.jpg) left top no-repeat;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
padding:0 0 0 10px;
line-height:30px;
float:left;
text-decoration:none;
color:#FFFFFF;
}
#tabholder li a span {
background:url(http://www.ammardesigns.com/sandbox/images/right-inactive.jpg) right top no-repeat;
padding:0 10px 0 0;
float:left;
}
#tabholder li#current a {
background:#0066a4 url(http://www.ammardesigns.com/sandbox/images/left-active.jpg) left top no-repeat;
}
#tabholder li#current a span {
background: url(http://www.ammardesigns.com/sandbox/images/right-active.jpg) right top no-repeat;
}
/*light version tab*/
#tabholder-light {
width:auto;
height:50px;
overflow:hidden;
margin:0;
padding:0;
list-style:none;
padding-left:16px;
padding-top:20px;
}
#tabholder-light li {
float:left;
margin:0 10px 0 0;
}
#tabholder-light li a {
background:#b2b2b2 url(http://www.ammardesigns.com/sandbox/images/left-inactive.jpg) left top no-repeat;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
padding:0 0 0 10px;
line-height:30px;
float:left;
text-decoration:none;
color:#FFFFFF;
}
#tabholder-light li a span {
background:url(http://www.ammardesigns.com/sandbox/images/right-inactive.jpg) right top no-repeat;
padding:0 10px 0 0;
float:left;
}
#tabholder-light li#current a {
background:#3ca2d3 url(http://www.ammardesigns.com/sandbox/images/left-active-light.jpg) left top no-repeat;
}
#tabholder-light li#current a span {
background:url(http://www.ammardesigns.com/sandbox/images/right-active-light.jpg) right top no-repeat;
}
/*end*/
.txt {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
color:#0066a4;
padding:1px 5px 1px 5px;
height:-18px;
}
.plc-logo {
background:url(http://www.ammardesigns.com/sandbox/images/plc.png) bottom;
width:124px;
height:62px;
margin-top:550px;
}
.leftcorner {
background:url(http://www.ammardesigns.com/sandbox/images/tl.jpg) top left;
width:22px;
height:22px;
float:left;
padding-left:-20px
}
.rightcorner {
background:url(http://www.ammardesigns.com/sandbox/images/tr.jpg) top right;
width:12px;
height:22px;
float:right;
margin-right:-12px;
margin-top:-12px
}
.leftbottom {
background:url(http://www.ammardesigns.com/sandbox/images/ll.jpg) left;
width:12px;
height:22px;
float:left;
margin-left:0px;
margin-left:-21px;
top:728px;
position:absolute;
}
.rightbottom {
background:url(http://www.ammardesigns.com/sandbox/images/lr.jpg) right;
width:12px;
height:22px;
float:right;
margin-left:1040px;
top:728px;
position:absolute;
}
/*light boxes*/
.leftcorner-lite {
background:url(http://www.ammardesigns.com/sandbox/images/tl-light.jpg) top left no-repeat;
width:12px;
height:22px;
float:left;
margin-left:-12px;
margin-top:-12px;
}
.rightcorner-lite {
background:url(http://www.ammardesigns.com/sandbox/images/tr-light.jpg) top right no-repeat;
width:12px;
height:22px;
float:right;
margin-right:-12px;
margin-top:-12px
}
.leftbottom-lite {
background:url(http://www.ammardesigns.com/sandbox/images/ll-right.jpg) left bottom no-repeat;
width:12px;
height:22px;
float:left;
margin-left:-12px;
top:719px;
position:absolute;
}
.rightbottom-lite {
background:url(http://www.ammardesigns.com/sandbox/images/lr-light.jpg) right no-repeat;
width:12px;
height:22px;
float:right;
margin-right:-12px;
top:719px;
padding-left:1050px;
position:absolute;
}
/*for genset*/
.genset-box {
background-color:#FFFFFF;
float:right;
width:1050px;
height:500px;
margin-top:-22px;
border:12px solid #3ca2d3;
padding-left:-20px;
}
.genset-leftcorner {
background:url(http://www.ammardesigns.com/sandbox/images/ll-right.jpg) left bottom no-repeat;
width:12px;
height:22px;
float:left;
margin-left:-12px;
top:689px;
position:absolute;
}
.genset-rightcorner {
background:url(http://www.ammardesigns.com/sandbox/images/lr-light.jpg) right no-repeat;
width:12px;
height:22px;
float:right;
margin-right:-12px;
top:689px;
padding-left:1050px;
position:absolute;
}
.add {
position:absolute;
padding-left:1050px;
top:160px;
}
.Genset-top {
position:absolute;
left:280px;
overflow:hidden;
}
/*Genset ends*/
.leftbottom-search {
background:url(http://www.ammardesigns.com/sandbox/images/ll-right.jpg) left bottom no-repeat;
width:12px;
height:22px;
float:left;
margin-left:-12px;
top:369px;
position:absolute;
}
.rightbottom-search {
background:url(http://www.ammardesigns.com/sandbox/images/lr-light.jpg) right no-repeat;
width:12px;
height:22px;
float:right;
margin-right:-12px;
top:369px;
padding-left:1050px;
position:absolute;
}
/*inner blue boxes*/
.plc-float {
background:#d5e6f0;
border:1px #0064a2 solid;
margin:5px;
padding-left:5px;
padding-right:5px;
padding-bottom:5px;
float:left;
width:auto;
height:200px;
}
/*inner border box white*/
/*white inner border*/
.txtfield {
width:150px;
margin:5px;
padding-top: 0px;
}
.txtfield-blue {
background-color:#d6e7ef;
width:292px;
margin:5px;
border:none;
}
.searchbar {
color:#f38526;
font-weight:bolder;
margin-top:5px;
margin-bottom:2px;
padding-top:2px;
padding-bottom:10px;
padding-left:5px;
}
/*heading */
.resultbox {
overflow-x:scroll;
overflow-y:hidden;
padding-top:0px;
height:250px;
}
.resultheads {
width:100%;
height:30px;
background-color:#d7e7f0;
overflow:hidden;
clip: rect(auto,auto,auto,auto);
margin-left: 0px;
color:#0066a4;
}
.staticbuttons {
width:1041px;
height:30px;
overflow:hidden;
clip: rect(auto,auto,auto,auto);
margin-left: 0px;
color:#0066a4;
left: 286px;
position:absolute;
top:737px;
background-color:#FFFFFF;
}
.footer {
clear:both;
background-color:#0164a5;
background:url(http://www.ammardesigns.com/sandbox/images/footer.png) repeat-x;
width:1280px;
height:10px;
padding-top:10px;
margin:auto;
}
.buttons {
background:url(http://www.ammardesigns.com/sandbox/images/action_button.png) no-repeat;
width:79px;
height:24px;
color:#FFFFFF;
font-weight:900;
border:none;
}
#sidemenu {
float: left;
clear: left;
margin: 0 0 -13px -60px;
padding-top: 13px;
}
#sidemenu li {
list-style:none;
float: left;
clear: left;
margin-top: 5px;
border-top: 1px solid #999;
padding: 0 0 13px 30px;
line-height: 25px;
}
#sidemenu li a {
float: left;
position:relative;
margin-top: -13px;
padding-left: 10px;
width: 150px;
height: 25px;
background: #999;
color:#fff;
text-decoration:none;
font-weight:700;
}
#sidemenu a:hover {
background:#06a;
}
#sidemenu #active a {
background: #0066a4;
}
.statictxt {
width:15%;
margin-top:10px;
float:left;
padding-top: 0px;
padding-bottom: 5px;
}
.searchtitle {
width:auto;
height:30px;
background-color:#d5e6f0;
margin-left:20px;
margin-right:50px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
color:#0066a4;
font-weight:bolder;
}
.popup-leftbottom {
background:url(http://www.ammardesigns.com/sandbox/images/ll.jpg) left;
width:12px;
height:22px;
float:left;
margin-left:0px;
margin-left:-21px;
top:367px;
position:absolute;
}
.popup-rightbottom {
background:url(http://www.ammardesigns.com/sandbox/images/lr.jpg) right;
width:12px;
height:22px;
float:right;
margin-left:1040px;
top:367px;
position:absolute;
}
#sidemenu {
margin-left:0!important;
width:auto!important;
padding-left:0!important;
}
.submenu {
margin:0!important;
padding-left:0!important;
width:auto!important;
}
</style>
<style type="text/css">
<!--
.style1 {
color: #FFFFFF
}
.dynamic-pm {
background-color:#FFFFFF;
float:right;
width:1050px;
margin-top:-22px;
border:12px solid #3ca2d3;
}
.base{
width:1050px;
height:22px;
position:relative;
top:12px;
clear:both;
z-index:99;
float:left;
}
* html .base {float:none}
*+html .base{float:none}
.base b {
background:url(http://www.ammardesigns.com/sandbox/images/ll-right.jpg) no-repeat 0 0;
width:12px;
height:22px;
margin-left:-12px;
float:left;
position:relative;
}
.base span {
background:url(http://www.ammardesigns.com/sandbox/images/lr-light.jpg) no-repeat 0 0;
width:12px;
height:22px;
float:right;
margin-right:-12px;
position:relative;
}
-->
</style>
<link href="../stylesheet/styles1.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrapper">
<div id="header">
<div class="MainNav"><a href="#">Telecompass</a> > <a href="pmView.php">OCMS</a> > PM</div>
<div class="SubNav"><a href="#">LOG OUT</a></div>
</div>
<div class="submenu">
<ul id="sidemenu">
<li><a href="#">Sites</a></li>
<li><a href="#">Inventory</a></li>
<li><a href="#">Electricity</a></li>
<li id="active"><a href="pmView.php">PM</a></li>
<li><a href="#">Fuel</a></li>
<li><a href="">Consumables</a></li>
<li><a href="">Work Orders</a></li>
</ul>
<div class="plc-logo"></div>
</div>
<ul id="tabholder-light">
<li><a href="pmView.php"><span>View PM</span></a></li>
<li id="current"><a href="pmSchedule.php"><span>Schedule PM</span></a></li>
<li><a href="#"><span>Reports</span></a></li>
</ul>
<div class="dynamic-pm">
<div class="rightcorner-lite"></div>
<div class="">
<form id="pmschedule" name="pmschedule" method="post" action="pmSchedule.php">
<table width="1050" border="0" cellspacing="0" cellpadding="0">
<tr height="20">
<tr>
<td width="20"></td>
<td width="487" valign="top" style="background-color:#d5e6f0; border:1px #0064a2 solid;"><table width="487" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="100" class="txt"><label>Site ID</label></td>
<td><input name="txtSiteID" type="text" class="txtfield" id="txtSiteID" />
</label></td>
</tr>
<tr>
<td width="100" class="txt">Address</td>
<td><input name="txtAddress" type="text" class="txtfield" id="txtAddress" /></td>
</tr>
<tr>
<td class="txt">Type</td>
<td class="textfield"><label> </label></td>
</tr>
<tr>
<td class="txt">City</td>
<td class="textfield"><label> </label></td>
</tr>
<tr>
<td class="txt">From</td>
<td><input name="txtFrom" type="text" class="txtfield" id="txtFrom" />
<script language="JavaScript" type="text/javascript">
new tcal ({
// form name
'formname': 'pmview',
// input name
'controlname': 'txtFrom'
});
</script></td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</table></td>
<td width="20"> </td>
<td width="487" valign="top" style="background-color:#d5e6f0; border:1px #0064a2 solid;"><table width="487" border="0" cellpadding="0" cellspacing="0">
<tr>
<td class="txt">Site Name</td>
<td><input name="txtSite" type="text" class="txtfield" id="txtSite" /></td>
</tr>
<tr>
<td width="100" class="txt">Status</td>
<td class=""></td>
</tr>
<tr>
<td class="txt">Category</td>
<td></td>
</tr>
<tr>
<td class="txt">Region</td>
<td></td>
</tr>
<tr>
<td class="txt">To</td>
<td><input name="txtTo" type="text" class="txtfield" id="txtTo" />
<script language="JavaScript" type="text/javascript">
new tcal ({
// form name
'formname': 'pmview',
// input name
'controlname': 'txtTo'
});
</script></td>
</tr>
<tr>
<td> </td>
<td><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="50%"> </td>
<td align="right"><input class="buttons" type="submit" name="Search" value="Search" /></td>
<td width="70"> </td>
</tr>
<tr>
<td> </td>
<td align="right"> </td>
<td> </td>
</tr>
</table></td>
</tr>
</table></td>
<td width="20"> </td>
</tr>
</table>
</td>
</tr>
</table>
</form>
<br />
<table width="1050" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="20"> </td>
<td width="1010" style="background-color:#d5e6f0; border:1px #0064a2 solid;"><div class="searchbar">Scheduled PM For</div>
<div class="searchbar">Scheduled PM For </div>
<!-- new codeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee-->
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td><table cellpadding="5" cellspacing="0" style="border:0px solid red; width:130px;">
<tr>
<td style="padding-top:8px;"><!-- --></td>
</tr>
<tr>
<td height="20"><span class="txt">Date Scheduled</span></td>
</tr>
<tr>
<td height="20"><span class="txt">PM Type</span></td>
</tr>
<tr>
<td height="20"><span class="txt">Team Assigned</span></td>
</tr>
<tr>
<td height="20"><span class="txt">Instructions</span></td>
</tr>
<tr>
<td height="20"><span class="txt">Date Performed</span></td>
</tr>
<tr>
<td height="20"><span class="txt">Site Visit Report</span></td>
</tr>
<tr>
<td height="20"><span class="txt">Site Images</span></td>
</tr>
</table></td>
<td><div class="resultbox">
<table cellpadding="0" cellspacing="0">
<tr>
<!-- dynamic code -->
<td><table cellpadding="5" cellspacing="0" >
<tr>
<td style="text-align:LEFT; background-color:#fff;" height="30"></td>
</tr>
<tr>
<td height="30"></td>
</tr>
<tr>
<td height="30"></td>
</tr>
<tr>
<td height="30"></td>
</tr>
<tr>
<td height="30"></td>
</tr>
<tr>
<td height="30"><a href="" onclick="javascript:newPopup('pmDate.php?sid=&pmid=');">Date Performed</a> </td>
</tr>
<tr>
<td height="30"><a href="" onclick="javascript:newPopup('siteReport.php?sid=&pmid=&sdate=');">Report</a>
<!--<a href="-->
<!--">View</a>-->
</td>
</tr>
<tr>
<td height="30"><a href="" onclick="javascript:newPopup('pmImages.php?sid=&pmid=&sdate=');">Images</a>
<!--<a href="-->
<!--">View</a>-->
</td>
</tr>
</table></td>
<!-- dynamic code end-->
</tr>
</table>
</div></td>
</tr>
</table></td>
<td width="20"></td>
</tr>
</table>
<br/>
<form name="addschedule" method="post" action="pmAdd.php">
<table width="1050" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="20"> </td>
<td width="1010" style="background-color:#d5e6f0; border:1px #0064a2 solid;"><table width="100%" border="0" cellspacing="0" cellpadding="8">
<tr class="txt">
<td align="center">Schedule Date</td>
<td align="center">PM Type</td>
<td align="center">PM Team</td>
<td align="center">Instructions</td>
<td align="center"><table width="100%" border="0" align="right" cellpadding="0" cellspacing="0">
<tr>
<td align="center"><input type="hidden" name="current_sid" value="" />
<a href="javascript:document.addschedule.submit();">
<div style="padding-left:60px;"><img src="http://www.ammardesigns.com/sandbox/pm/images/schedule.png" border="0" width="33" height="33" alt="Schedule" onclick="return validFields(this);" /></a></div></td>
</tr>
</table></td>
<td> </td>
</tr>
<tr>
<td align="center"><label>
<input type="text" name="txtDate" id="txtDate" />
</label>
<script language="JavaScript" type="text/javascript">
new tcal ({
// form name
'formname': 'addschedule',
// input name
'controlname': 'txtDate'
});
</script></td>
<td align="center"></td>
<td align="center"></td>
<td align="center"><input name="txtInstruction" type="text" id="txtInstruction" onClick='targetitem = document.addschedule.txtInstruction; dataitem = window.open("popup.php",
"dataitem", "height=400,width=900,toolbar=no,menubar=no,scrollbars=yes"); dataitem.targetitem = targetitem' /></td>
<td align="center"><table width="158" border="0" align="right" cellpadding="0" cellspacing="0">
<tr>
<td colspan="2"><table width="158" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><a href=""><img src="http://www.ammardesigns.com/sandbox/pm/images/back.png" alt="back" width="12" height="15" border="0" /></a></td>
<td><span class="txt" style="padding-left:30px;">Page
of </span></td>
<td><a href =""><img src="http://www.ammardesigns.com/sandbox/pm/images/next.png" alt="fwd" width="12" height="15" border="0" /></a></td>
</tr>
</table></td>
</tr>
<tr>
<td><input class="buttons" type="submit" value="Export" /></td>
<td><input class="buttons" type="submit" value="Print" /></td>
</tr>
</table></td>
<td width="30"><!--<input type="submit" name="add" value="Schedule" />-->
<!-- <input type="image" src="http://www.ammardesigns.com/sandbox/pm/images/schedule.png" border="0" width="33" height="33" alt="Schedule" name="add"></td>--></td>
</tr>
</table></td>
<td width="20"> </td>
</tr>
</table>
<!-- </form>-->
</form>
<div class="base"><b></b><span></span></div>
</div>
</div>
</div>
<div class="footer"></div>
</html>
Do not reply until you have made those changes
so the approach i m making isn’t good? here is the updated link http://ammardesigns.com/sandbox/fuel/SiteSearch.php in chorme the 2nd box tabs hides too
Yes the approach you are using is bad as you are absolutely placing the corners (on some elements) from the top of the element which assumes that all browsers will render the distance the same when there are so many variables in place.
The main problem in that example is that you haven’t cleared the tabholder and so it slides underneath in Safari and chrome.
Add clear:both.
/* tabs */
#tabholder {
width:auto;
height:30px;
overflow:hidden;
margin:0;
padding:0;
list-style:none;
padding-left:17px;
padding-top:55px;
[B] clear:both[/B]
}
However you would be better to stop using different routines on all pages and use one robust routine that will work everywhere and just modify the colours with extra classes. Avoid using absolute positioning unless you are placing within a confined and controlled space.
You still haven’t implemented the 100% height on this page so that is broken also. Why are you using different css on all these pages. It’s almost impossible to fix this for you.
html,body{height:100%}
#wrapper {
margin:auto;
width:1280px;
min-height:100%;
margin-top:-10px;
}
* html #wrapper{height:100%}
Also you can’t wrap the page with the form element because that kills the 100% height. The form needs to be inside #wrapper and not outside it.
All these errors stem right back to the beginning when you did not implement the fixes I gave on the very first template. You have just compounded the errors by mixing the code and then scattered it on all pages.
Please be consistent with your approach and your code and don’t create more pages until the one page is working perfectly.
paul and ryan thanks a lot for helping me out. i was really annoying i know.
It wasn’t you specifically that was annoying, just you not updating the code we give you, and then you saying it doesn’t work 
. I have dealt with a lot worse on here don’t worry about it you were fine :).
Glad it’s all fixed now :).
Lol. Thanks but still I got some problem too I wanna compact it’s width size to have some breathing room from right side still I wanna make it more good in resoultion.
:crazy:
Link returns 404. And to make it fluid use percentage widths on the columns…
I would give a nice link explaining this but Tommys site has a PHP error :(.
well i got the footer to sit at bottom. but now i see a scrollbar a little on 1280 by 800 res. there is a little gap below footer (white space) here is my css
html, body, #wrapper{height:100%;}
#wrapper{margin:auto; width:1255px; height:auto; margin-top:-10px; min-height:100%;}
.outer{width:1064px; float:right;}
#header{width:1255px; height:34px; background:url(../images/header.png) repeat-x; border-top:10px solid #fff;}
.dynamic-light{background-color:#FFFFFF;float:right;width:1040px; height:570px;border:12px solid #3ca2d3; border-bottom:none; padding-bottom:18px;}
.footer {clear:both;background-color:#0164a5;background:url(../images/footer.png) repeat-x;width:1255px;height:10px;padding-top:10px;margin:auto;}
We’ll need the current link.
here . there is one problem 2. if u see the logo. in ff its ok but in IE its attached at sidemenu bottom. besides that i can’t make the right corner fix. as bottom corner. i wanna make a right corner.
The PHP code is still above the doctype lol
<?php
include_once("../include/functions.php");
/* $error=$_REQUEST['error'];*/
error_reporting(E_ALL ^ E_NOTICE);
?>
<!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">
<head>
I don’t mean to be mean at all, but that PHP code above the doctype either has to go or it has to be parsed by the server. IE being in quirks mode is not a fair fight for me and Paul to fight lol :).
Let’s just ignore php for now n focus on our problem
The PHP is hte problem though :). IE is in quirks mode and thus the page is behaving more like IE5.
Well let’s just ignore php. N come to the problem I got?
Ok so if I take out the PHP aka ignore it…
<!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">
<head>
<base href="http://ammardesigns.com/sandbox/cellsites/CellSites_Add.htm" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Telecompass</title>
<link href="../stylesheets/opex.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="../scripts/functions.js">
</script>
</head>
<body onLoad="checkError();">
<form method="post" name="addsite" action="AddCellSites.php" enctype="multipart/form-data"
onSubmit="return validateSites();">
<div id="wrapper">
<div id="header">
<div class="MainNav"><a href="#">Telecompass</a> > <a href="../home.php">OPEXLOGIC</a> >
Sites</div>
<div class="SubNav"><a href="../logout.php">LOGOUT</a></div>
</div><!--header div ends-->
<div class="submenu">
<ul id="sidemenu">
<li id="active"><a href="SiteSearch.php">Sites</a></li>
<li><a href="../inventory/SiteInventorySearch.php">Inventory</a></li>
<li><a href="../electricity/ElectricityConsumptionSearch.php">Electricity</a></li>
<li><a href="../pm/pmView.php">PM</a></li>
<li><a href="../fuel/DistributionSearch.php">Fuel</a></li>
<li><a href="">Consumables</a></li>
<li><a href="">Work Orders</a></li>
</ul>
<div class="plc-logo"></div>
</div><!--submenu div ends-->
<div class="outer">
<ul id="tabholder-light">
<li id="current"><a href="CellSites.php"><span>Site Information</span></a></li>
<li><a href="SiteAccess.php"><span>Site Access Info</span></a></li>
<li><a href="Consumption.php"><span>Consumption Info</span></a></li>
<li><a href="Technical.php"><span>Technical Info</span></a></li>
</ul>
<div class="dynamic-light">
<div class="rightcorner-lite"><!-- corners--></div>
<table width="1037" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="20"> </td>
</tr>
<tr>
<td><table width="1037" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="25"> </td>
<td width="312" style="background-color:#d5e6f0; border:1px #0064a2 solid;"><table
width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td colspan="2" class="searchbar">
General Information</td>
</tr>
<tr>
<td class="txt">Site ID</td>
<td><label>
<input name="txtSiteID" type="text" class="txtfield" id="txtSiteID" />
</label></td>
</tr>
<tr>
<td class="txt">Site Name</td>
<td><label>
<input name="txtSiteName" type="text" class="txtfield" id="txtSiteName" />
</label></td>
</tr>
<tr>
<td class="txt">Site Alias</td>
<td><label>
<input name="txtAlias" type="text" class="txtfield" id="txtAlias" />
</label></td>
</tr>
<tr>
<td class="txt">Priority</td>
<td><?php CreatePriorityddl("");?></td>
</tr>
<tr>
<td class="txt">Service Area</td>
<td><label>
<input name="txtService" type="text" class="txtfield" id="txtService" />
</label></td>
</tr>
<tr>
<td class="txt">Latitude</td>
<td><label>
<input name="txtLat" type="text" class="txtfield" id="txtLat" />
</label></td>
</tr>
</table></td>
<td width="10"> </td>
<td width="312"style="background-color:#d5e6f0; border:1px #0064a2 solid;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="searchbar"> </td>
<td><label></label></td>
</tr>
<tr>
<td><span class="txt">Status</span></td>
<td><?php CreateStatusddl("");?></td>
</tr>
<tr>
<td><span class="txt">Category</span></td>
<td><?php CreateCategoryddl("");?></td>
</tr>
<tr>
<td><span class="txt">Type</span></td>
<td><?php CreateTypeddl("");?></td>
</tr>
<tr>
<td><span class="txt">Maintained by</span></td>
<td><?php CreateMaintainedddl("");?></td>
</tr>
<tr>
<td><span class="txt">Region</span></td>
<td><?php CreateRegionddl("");?></td>
</tr>
<tr>
<td><span class="txt">Longitude. </span></td>
<td><label>
<input name="txtLong" type="text" class="txtfield" id="txtLong" />
</label></td>
</tr>
</table>
</td>
<td width="10"> </td>
<td width="350" rowspan="3">
<table id="tblSiteInfo" height="325">
<tr>
<td class="txt">Upload Image</td>
<td class="txt"><input type="file" name="uploadedfile" id="uploadedfile" /></td>
</tr>
</table>
</td>
<td width="25"> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td style="background-color:#d5e6f0; border:1px #0064a2 solid;"><table width="100%" border="0"
cellspacing="0" cellpadding="0">
<tr>
<td colspan="2" class="searchbar">Location Sharing</td>
</tr>
<tr>
<td class="txt">Address</td>
<td><input name="txtAddress" type="text" class="txtfield" id="txtAddress" /></td>
</tr>
<tr>
<td class="txt">City</td>
<td><?php CreateCityddl("");?></td>
</tr>
<tr>
<td class="txt">State</td>
<td><input name="txtState" type="text" class="txtfield" id="txtState" /></td>
</tr>
<tr>
<td class="txt">Postal Code</td>
<td><input name="txtCode" type="text" class="txtfield" id="txtCode" /></td>
</tr>
<tr>
<td class="txt">Intersection</td>
<td><input name="txtIntersection" type="text" class="txtfield" id="txtIntersection" /></td>
</tr>
</table></td>
<td> </td>
<td style="background-color:#d5e6f0; border:1px #0064a2 solid;"><table width="100%" border="0"
cellspacing="0" cellpadding="0">
<tr>
<td colspan="2" class="searchbar">Sharing</td>
</tr>
<tr>
<td class="txt">Shared</td>
<td><input
type="checkbox" id="chkShared" name="chkShared" onchange="DisBox()"/></td>
</tr>
<tr>
<td class="txt">Host</td>
<td><input name="txtHost" type="text" class="txtfield" id="txtHost" /></td>
</tr>
<tr>
<td class="txt">Guest1</td>
<td><input name="txtGuest1" type="text" class="txtfield" id="txtGuest1" /></td>
</tr>
<tr>
<td class="txt">Guest2</td>
<td><input name="txtGuest2" type="text" class="txtfield" id="txtGuest2" /></td>
</tr>
<tr>
<td class="txt">Other Network ID</td>
<td><input name="txtNetwork" type="text" class="txtfield" id="txtNetwork" /></td>
</tr>
</table></td>
<td> </td>
<td> </td>
</tr>
</table></td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td><table width="1037" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="25"> </td>
<td style="background-color:#d5e6f0; border:1px #0064a2 solid;"><table width="100%" border="0"
cellspacing="0" cellpadding="0">
<tr>
<td class="searchbar">Information</td>
</tr>
<tr>
<td><table id="tblSiteInfo2" >
<tr>
<td class="txt">Site Map Link
<input type="text" size="55" name="txtMap"/></td>
<td class="txt">Last Updated
<input type="text" name="txtUpdated" /></td>
<td class="txt">By
<input type="text" name="txtUpdated" /></td>
</tr>
<tr>
<td class="txt" colspan="3" >Comments
<textarea name="txtcomments" id="txtcomments" style="width: 90%; height:
40px;"></textarea></td>
</tr>
</table></td>
</tr>
</table></td>
<td width="25"> </td>
</tr>
</table></td>
</tr>
</table>
<table width="1037" border="0" cellspacing="0" cellpadding="0">
<tr>
<td> </td>
<td width="79"><input class="buttons" type="submit" value="Save" name="Addsite" id="Addsite"/></td>
<td width="79"><input class="buttons" type="submit" onclick="return checkEmail('Email');"
name="Email" id="Email" value="Email"/></td>
<td width="79"><input class="buttons" type="button" value="Export" onClick="return
checkEmail('Export');"/></td>
<td width="79"><input class="buttons" type="submit" onClick="return checkEmail('Reports');"
name="Reports" id="Reports" value="Reports"/></td>
<td width="79"><input class="buttons" type="submit" onClick="return checkEmail('Print');"
name="Print" id="Print" value="Print"/></td>
<td width="20"></td>
</tr>
</table>
</div><!-- dynamic div ends-->
</div><div class="base"><b></b><span></span></div>
</div><!--wrapper div ends-->
<div class="footer"></div>
</form>
</body>
</html>
I have no errors left in IE…what exactly do you want fixed? 
lol - The PHP is the problem.
It cannot be ignored because it changes the way that all versions of IE behave.
Your page cannot be fixed if you stay in quirks mode (which is what the code above the doctype is doing) unless you want to start from scratch and re-code everything so that it works in ie5 (which is effectively what happens to all ie versions in quirks mode)).
Just remove the php comments above the doctype and ie6 - 8 will be fixed.
You still haven’t added the IE6 styles I gave you abut 10 times either to fix the 100% height and now you have also added a form around the page which will kill the sticky footer. The form needs to be inside the page wrapper (or use the form instead of the wrapper).
I did apply Body,HTML (height:100%) the footer is sitting at 800 height but there is a scrollbar appearing (vertically) I want it gone(it’s appearing after I apply the sticky footer propety. Also I wanna cover my right top corner with rounded one I m using float right but it’s not covering the right corner.
Paul I m applying what u said n the reason I uploaded a php query page is coz i want the functionality to halt so I can point out my footer/scroll issue
- You set the wrapper to height:100% along with the html,body so it can only be 100% height nothing more. I don’t understand why you are taking our code and modifying it because our code produces perfect results from our end (at least I know Paul and me check our code and we are only ones posting here
- Please only update your code/add waht we give you. Otherwise this will take forever with us catching what you modified
Now that that is done I can begin :). Sorry if that seemed harsh
Now, you have this rule
html,body,#wrapper{height:100%;}
It should only have the html,body there. So remove the #wrapper bit (and the comma). Next, set these rules
#wrapper
{
min-height:100%;
overflow:hidden;
}
- html #wrapper{height:100%;}
I don't know if you had the * html #wrapper{} bit in your file. I didn't look
Now hte sticky footer is working (but the content is too big so you probably can't see it happening.
Oh, I forgot to mention, I deleted the <form> tag you had at the beginning of hte document. The entire page shouldn't be a form..only wrap the section(s) of a form in the <form>. Not the entire page. I am going to post code below..the blue is the updated CSS. The bold is the form starting and close tag (search through it until you find both). Notice where I moved them.
<!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”>
<head>
<base href=“http://ammardesigns.com/sandbox/cellsites/CellSites_Add.htm” />
<meta http-equiv=“Content-Type” content=“text/html; charset=utf-8” />
<title>Telecompass</title>
<link href=“…/stylesheets/opex.css” rel=“stylesheet” type=“text/css” />
<script type=“text/javascript” src=“…/scripts/functions.js”>
</script>
<style>[color=blue]
#wrapper
{
height:auto;
min-height:100%;
overflow:hidden;
}
- html #wrapper{height:100%;}[/color]
</style>
</head>
<body onLoad=“checkError();”>
<div id=“wrapper”>
<div id=“header”>
<div class=“MainNav”><a href=“#”>Telecompass</a> > <a href=“…/home.php”>OPEXLOGIC</a> >
Sites</div>
<div class=“SubNav”><a href=“…/logout.php”>LOGOUT</a></div>
</div><!–header div ends–>
<div class=“submenu”>
<ul id=“sidemenu”>
<li id=“active”><a href=“SiteSearch.php”>Sites</a></li>
<li><a href=“…/inventory/SiteInventorySearch.php”>Inventory</a></li>
<li><a href=“…/electricity/ElectricityConsumptionSearch.php”>Electricity</a></li>
<li><a href=“…/pm/pmView.php”>PM</a></li>
<li><a href=“…/fuel/DistributionSearch.php”>Fuel</a></li>
<li><a href=“”>Consumables</a></li>
<li><a href=“”>Work Orders</a></li>
</ul>
<div class=“plc-logo”></div>
</div><!–submenu div ends–>
<div class=“outer”>
<ul id=“tabholder-light”>
<li id=“current”><a href=“CellSites.php”><span>Site Information</span></a></li>
<li><a href=“SiteAccess.php”><span>Site Access Info</span></a></li>
<li><a href=“Consumption.php”><span>Consumption Info</span></a></li>
<li><a href=“Technical.php”><span>Technical Info</span></a></li>
</ul>
<div class="dynamic-light">
<div class=“rightcorner-lite”><!-- corners–></div>[b]
<form method=“post” name=“addsite” action=“AddCellSites.php” enctype=“multipart/form-data”
onSubmit=“return validateSites();”>[/b]
<table width=“1037” border=“0” cellspacing=“0” cellpadding=“0”>
<tr>
<td width=“20”> </td>
</tr>
<tr>
<td><table width=“1037” border=“0” cellspacing=“0” cellpadding=“0”>
<tr>
<td width=“25”> </td>
<td width=“312” style=“background-color:#d5e6f0; border:1px #0064a2 solid;”><table
width=“100%” border=“0” cellspacing=“0” cellpadding=“0”>
<tr>
<td colspan=“2” class=“searchbar”>
General Information</td>
</tr>
<tr>
<td class=“txt”>Site ID</td>
<td><label>
<input name=“txtSiteID” type=“text” class=“txtfield” id=“txtSiteID” />
</label></td>
</tr>
<tr>
<td class=“txt”>Site Name</td>
<td><label>
<input name=“txtSiteName” type=“text” class=“txtfield” id=“txtSiteName” />
</label></td>
</tr>
<tr>
<td class="txt">Site Alias</td>
<td><label>
<input name="txtAlias" type="text" class="txtfield" id="txtAlias" />
</label></td>
</tr>
<tr>
<td class=“txt”>Priority</td>
<td><?php CreatePriorityddl(“”);?></td>
</tr>
<tr>
<td class=“txt”>Service Area</td>
<td><label>
<input name=“txtService” type=“text” class=“txtfield” id=“txtService” />
</label></td>
</tr>
<tr>
<td class=“txt”>Latitude</td>
<td><label>
<input name=“txtLat” type=“text” class=“txtfield” id=“txtLat” />
</label></td>
</tr>
</table></td>
<td width=“10”> </td>
<td width=“312"style=“background-color:#d5e6f0; border:1px #0064a2 solid;”>
<table width=“100%” border=“0” cellspacing=“0” cellpadding=“0”>
<tr>
<td class=“searchbar”> </td>
<td><label></label></td>
</tr>
<tr>
<td><span class=“txt”>Status</span></td>
<td><?php CreateStatusddl(”“);?></td>
</tr>
<tr>
<td><span class=“txt”>Category</span></td>
<td><?php CreateCategoryddl(”“);?></td>
</tr>
<tr>
<td><span class=“txt”>Type</span></td>
<td><?php CreateTypeddl(”“);?></td>
</tr>
<tr>
<td><span class=“txt”>Maintained by</span></td>
<td><?php CreateMaintainedddl(”“);?></td>
</tr>
<tr>
<td><span class=“txt”>Region</span></td>
<td><?php CreateRegionddl(”");?></td>
</tr>
<tr>
<td><span class=“txt”>Longitude. </span></td>
<td><label>
<input name=“txtLong” type=“text” class=“txtfield” id=“txtLong” />
</label></td>
</tr>
</table>
</td>
<td width=“10”> </td>
<td width=“350” rowspan=“3”>
<table id=“tblSiteInfo” height=“325”>
<tr>
<td class=“txt”>Upload Image</td>
<td class=“txt”><input type=“file” name=“uploadedfile” id=“uploadedfile” /></td>
</tr>
</table>
</td>
<td width=“25”> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td style=“background-color:#d5e6f0; border:1px #0064a2 solid;”><table width=“100%” border=“0”
cellspacing=“0” cellpadding=“0”>
<tr>
<td colspan=“2” class=“searchbar”>Location Sharing</td>
</tr>
<tr>
<td class=“txt”>Address</td>
<td><input name=“txtAddress” type=“text” class=“txtfield” id=“txtAddress” /></td>
</tr>
<tr>
<td class=“txt”>City</td>
<td><?php CreateCityddl(“”);?></td>
</tr>
<tr>
<td class=“txt”>State</td>
<td><input name=“txtState” type=“text” class=“txtfield” id=“txtState” /></td>
</tr>
<tr>
<td class=“txt”>Postal Code</td>
<td><input name=“txtCode” type=“text” class=“txtfield” id=“txtCode” /></td>
</tr>
<tr>
<td class=“txt”>Intersection</td>
<td><input name=“txtIntersection” type=“text” class=“txtfield” id=“txtIntersection” /></td>
</tr>
</table></td>
<td> </td>
<td style=“background-color:#d5e6f0; border:1px #0064a2 solid;”><table width=“100%” border=“0”
cellspacing=“0” cellpadding=“0”>
<tr>
<td colspan=“2” class=“searchbar”>Sharing</td>
</tr>
<tr>
<td class=“txt”>Shared</td>
<td><input
type=“checkbox” id=“chkShared” name=“chkShared” onchange=“DisBox()”/></td>
</tr>
<tr>
<td class=“txt”>Host</td>
<td><input name=“txtHost” type=“text” class=“txtfield” id=“txtHost” /></td>
</tr>
<tr>
<td class=“txt”>Guest1</td>
<td><input name=“txtGuest1” type=“text” class=“txtfield” id=“txtGuest1” /></td>
</tr>
<tr>
<td class=“txt”>Guest2</td>
<td><input name=“txtGuest2” type=“text” class=“txtfield” id=“txtGuest2” /></td>
</tr>
<tr>
<td class=“txt”>Other Network ID</td>
<td><input name=“txtNetwork” type=“text” class=“txtfield” id=“txtNetwork” /></td>
</tr>
</table></td>
<td> </td>
<td> </td>
</tr>
</table></td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td><table width=“1037” border=“0” cellspacing=“0” cellpadding=“0”>
<tr>
<td width=“25”> </td>
<td style=“background-color:#d5e6f0; border:1px #0064a2 solid;”><table width=“100%” border=“0”
cellspacing=“0” cellpadding=“0”>
<tr>
<td class=“searchbar”>Information</td>
</tr>
<tr>
<td><table id=“tblSiteInfo2” >
<tr>
<td class=“txt”>Site Map Link
<input type=“text” size=“55” name=“txtMap”/></td>
<td class=“txt”>Last Updated
<input type=“text” name=“txtUpdated” /></td>
<td class=“txt”>By
<input type=“text” name=“txtUpdated” /></td>
</tr>
<tr>
<td class=“txt” colspan=“3” >Comments
<textarea name=“txtcomments” id=“txtcomments” style="width: 90%; height:
40px;"></textarea></td>
</tr>
</table></td>
</tr>
</table></td>
<td width=“25”> </td>
</tr>
</table></td>
</tr>
</table>
<table width=“1037” border=“0” cellspacing=“0” cellpadding=“0”>
<tr>
<td> </td>
<td width=“79”><input class=“buttons” type=“submit” value=“Save” name=“Addsite” id=“Addsite”/></td>
<td width=“79”><input class=“buttons” type=“submit” onclick=“return checkEmail(‘Email’);”
name=“Email” id=“Email” value=“Email”/></td>
<td width=“79”><input class=“buttons” type=“button” value=“Export” onClick="return
checkEmail(‘Export’);"/></td>
<td width=“79”><input class=“buttons” type=“submit” onClick=“return checkEmail(‘Reports’);”
name=“Reports” id=“Reports” value=“Reports”/></td>
<td width=“79”><input class=“buttons” type=“submit” onClick=“return checkEmail(‘Print’);”
name=“Print” id=“Print” value=“Print”/></td>
<td width=“20”></td>
</tr>
</table>
</form>
</div><!-- dynamic div ends–>
</div><div class=“base”><b></b><span></span></div>
</div><!–wrapper div ends–>
<div class=“footer”></div>
</body>
</html>
Again, perfect results with the above codee :)