Sticky footer help and resoultion help

hey folks, i m working on a website. which dimension shld be 1028 by 800. i gave the #wrapper div height and width of that but now even on dimension of 1028 by 800. i see horizontal scroll bar where as i want it just the dimension. and i tried so much for sticky footer but i can’t help it i want the footer to sit on base of the 800 height. here is the link http://ammardesigns.com/sandbox/cellsites/CellSites.php

The wrapper is 1280px and no scrollbar over that size. :wink:

meaning? coz the dynamic div inside is 1050px; i m confused

Hi, read the FAQ for full details but you haven’t done anaything to start teh sticky fopoter :slight_smile:

For one, the html and body need 100% height for this to even start working since the wrapper will need a parent with a height

html,body{height:100%;}

Then give the wrapper min-height:100% to fill up 100% of the viewport (IE6 compensated below of course)

#wrapper{min-height:100%;}
* html #wrapper{height:100%;}

Then add in the brownie mix :slight_smile:

#wrapper{margin-top:-20px;/*height of footer is 10px + the 10px top padding*/
padding-top:20px;}

Ryan your given code disturbs my layout. have a look to my css

No it doesn’t :). If I make a local copy and remove the entire huge table and refresh the browser the sticky footer is in place (minus a minor fix for IE8/opera)

well i can’t del the tables. they r the real life of whats the application is abt

You are missing my point. The sticky footer works and removing the table locally shows that.

I’m missing why you say the layout is broken anyway once you add my code :slight_smile:

ok coming back to second half of my question abt resoultion. why does horizantal scroll bar appear on 1280 * 800 where as the website was designed in a container with that width

I’m not seeing a scrollbar when I get it to that resolution in FF or IE7, however you could give #wrapper overflow:hidden; and that would ensure nothing would hang out of there since you gave it a fixed width :slight_smile:

yes but i see that on that regulation the main box with light blue border cut off. isn’t it? i think i m getting out of resolution horizontally?

No it’s not being cut off. If you think it is you could give the body like 5px horizontal padding to make sure the border is completely showing, but it is even when I make the window smaller :slight_smile:

i m not getting the footer to sit at the bottom :mad:

ryan i saw ur comment in other post thread saying why u using height of 800px. i m using it coz its a requirement by client that res should be 1280*800. given that my footer is still not sitting on bottom. :mad:

So wait…

The #wrapper must be 800px high according to the client. Okay.

Then you want the footer at the bottom. So, the footer must be inside the wrapper. If the footer stays outside the wrapper, then your page will be taller than 800px: the wrapper + the footer height. That’s more than 800px.

You put the footer outside the wrapper because that’s how you do the “sticky footer” technique. But the good news is, you don’t need to do it that way.

The “sticky footer” is for pages with unknown height. That’s why people do all the convoluted complicated sticky footer code, because they might have one page that’s really long and then another page that’s really short. But you know your height. Every single page will be 800px tall.

So you can do two things:

You can put the footer inside the #wrapper and let all the other stuff inside teh #wrapper push the footer down.

Or

You can keep the footer outside the #wrapper, but because your footer has a height, make your wrapper LESS than 800px, and let the footer fill the rest.

So if you’re footer is 20px high, then make #wrapper 780px and the footer is 20px. 780+20=your client’s 800px.

Did you want the footer inside the blue border??

If you konw the foooter height then youcan only have a sticky footer at 1 resolution if you keep the height:800px

Lets say the footer/header height are total 100px

It will only be a sticky footeer at a 900height resolution monitor. Nowhere else.

i m seeing this http://ammardesigns.com/sandbox/cellsites/CellSites.php at 1280 * 800 i see scroll :frowning: now i want that no scroll bars occur on 1280 * 800. how can i trim it. so at 1280 * 800 i don’t see any scrolls without disturbing layout

Hi,

I’ve fixed this sticky footer for you about 10 times now but you still don’t seem to grasp how it works so take some time and go back and read all the links I have given you because until you understand it you won’t be able to adjust it yourself. :slight_smile:

You’ve set the container to 100% height and then dragged it upwards by 10px which is supposed to be the height of the footer. However you haven’t given the footer a height and you have also added 10px padding onto the container making 100% + 10px too big so it will always produce a scrollbar.

Three things work together to create a sticky footer:

The main container which stretches 100% (and can’t have padding top or bottom).

The negative margin on the container that matches the exact height of the footer.

The soak up element which is created in a number of ways but most easily by applying a top border to the header that is equal to the height of the footer. (If you didn’t soak up this space then then something would overlap because all things must be accounted for).

Theses there things are constants and must be changed together. They are all explained in all the links I have given before and in the FAq at the top of the forum.:slight_smile:

Regarding the 800px height then you have a misunderstanding of what is going on here. If a monitor screen is 800px high then for the browser to fit on that screen without scrolling would depend on the amount of chrome (browser interface) that the user has. On my screen in Firefox with the toolbars I have set that would mean a viewport height of about 500px would be needed before a scroll would occur.

This would of course vary from user to user and browser to browser. You cannot say what will fit on a users screen height and in any case 90% of users will not have their browser maximised anyway.

Regarding the 1280px width issue (which has already been mentioned a number of times) the arguments are similar to above and would assume that no side toolbars have been stacked on the window. A 1280px wide monitor would in most cases require the browsers viewport width to be about 30px less so you would need to design for a max-width of about 1250px wide to allow the browsers chrome room to fit on the monitor.

Hope that explains it all :slight_smile:

Here are the adjustments for the sticky footer (again) but you will have to make the width adjustments yourself. :slight_smile:


<!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>
<link href="../stylesheet/styles1.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="../scripts/functions.js">
</script>
<style>
@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%;
  [B]  margin-top:-20px;
 /*padding-top:20px;*/[/B]
    overflow:hidden;
}
[B]* html #wrapper{height:100%}[/B]

.main {
    background:url(http://ammardesigns.com/sandbox/images/small-bg.jpg) repeat-x;
    margin-left:138px;
    margin-top:10px;
    padding:5px 0 5px 0;
}
#header {
    width:1280px;
    height:34px;
    background:url(http://ammardesigns.com/sandbox/images/header.png) repeat-x;
[B]border-top:20px solid #fff;[/B]
}
.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:50px;
    display:inline;
    margin-top: 0px;
    margin-right: 0;
    margin-bottom: 0;
    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;
}
/* tabs */
#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://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://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://ammardesigns.com/sandbox/images/left-active.jpg) left top no-repeat;
}
#tabholder li#current a span {
    background: url(http://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:55px;
}
#tabholder-light li {
    float:left;
    margin:0 10px 0 0;
}
#tabholder-light li a {
    background:#b2b2b2 url(http://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://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://ammardesigns.com/sandbox/images/left-active-light.jpg) left top no-repeat;
}
#tabholder-light li#current a span {
    background:url(http://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://ammardesigns.com/sandbox/images/plc.png) bottom;
    width:124px;
    height:62px;
    margin-top:550px;
}
.leftcorner {
    background:url(http://ammardesigns.com/sandbox/images/tl.jpg) top left;
    width:22px;
    height:22px;
    float:left;
    padding-left:-20px
}
.rightcorner {
    background:url(http://ammardesigns.com/sandbox/images/tr.jpg) top right;
    width:12px;
    height:22px;
    float:right;
    margin-right:-12px;
    margin-top:-12px
}
.leftbottom {
    background:url(http://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://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://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://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://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://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://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://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://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://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;
}
[B].footer {
    clear:both;
    background:#0164a5 url(http://ammardesigns.com/sandbox/images/footer.png) repeat-x;
    width:1280px;
    height:20px;
    margin:auto;
}[/B]
.buttons {
    background:url(http://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://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://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>
</head>
<body>
<div id="wrapper">
    <div id="header">
        <div class="MainNav"><a href="#">Telecompass</a> > <a href="#">OCMS</a> >  Sites</div>
        <div class="SubNav"><a href="#">LOG OUT</a></div>
    </div>
    <!--header div ends-->
    <div class="submenu">
        <ul id="sidemenu">
            <li id="active"><a href="#">Sites</a></li>
            <li><a href="#">Inventory</a></li>
            <li><a href="#">Electricity</a></li>
            <li><a href="#">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>
    <!--submenu div ends-->
    <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>
        <div class="telecompass"></div>
        <table width="1050" border="0" cellspacing="0" cellpadding="0">
            <tr>
                <td width="20">&nbsp;</td>
            </tr>
            <tr>
                <td><table width="1050" border="0" cellspacing="0" cellpadding="0">
                        <tr>
                            <td width="25">&nbsp;</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"   value=""  readonly="readonly"/>
                                            </label></td>
                                    </tr>
                                    <tr>
                                        <td class="txt">Site Name</td>
                                        <td><label>
                                            <input name="txtSiteName" type="text" class="txtfield" id="txtSiteName"  value="" readonly="readonly" />
                                            </label></td>
                                    </tr>
                                    <tr>
                                        <td class="txt">Site Alias</td>
                                        <td><label>
                                            <input name="txtAlias" type="text" class="txtfield" id="txtAlias"  value="" readonly="readonly"/>
                                            </label></td>
                                    </tr>
                                    <tr>
                                        <td class="txt">Priority</td>
                                        <td><label>
                                            <input name="txtPriority" type="text" class="txtfield" id="txtPriority" value="" readonly="readonly" />
                                            </label></td>
                                    </tr>
                                    <tr>
                                        <td class="txt">Service Area</td>
                                        <td><label>
                                            <input name="txtService" type="text" class="txtfield" id="txtService"  value="" readonly="readonly"/>
                                            </label></td>
                                    </tr>
                                    <tr>
                                        <td class="txt">Latitude</td>
                                        <td><label>
                                            <input name="txtLat" type="text" class="txtfield" id="txtLat"  value="" readonly="readonly"/>
                                            </label></td>
                                    </tr>
                                </table></td>
                            <td width="10">&nbsp;</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">&nbsp;</td>
                                        <td><label></label></td>
                                    </tr>
                                    <tr>
                                        <td><span class="txt">Status</span></td>
                                        <td><label>
                                            <input name="txtStatus" type="text" class="txtfield" id="txtStatus"  value="" readonly="readonly"/>
                                            </label></td>
                                    </tr>
                                    <tr>
                                        <td><span class="txt">Category</span></td>
                                        <td><label>
                                            <input name="txtCategory" type="text" class="txtfield"  id="txtCategory"  value="" readonly="readonly"/>
                                            </label></td>
                                    </tr>
                                    <tr>
                                        <td><span class="txt">Type</span></td>
                                        <td><label>
                                            <input name="txtType" type="text" class="txtfield" id="txtType"  value="" readonly="readonly"/>
                                            </label></td>
                                    </tr>
                                    <tr>
                                        <td><span class="txt">Maintained by</span></td>
                                        <td><label>
                                            <input name="txtMaintained" type="text" class="txtfield" id="txtMaintained" value="" readonly="readonly" />
                                            </label></td>
                                    </tr>
                                    <tr>
                                        <td><span class="txt">Region</span></td>
                                        <td><label>
                                            <input name="txtRegion" type="text" class="txtfield" id="txtRegion"   value="" readonly="readonly"/>
                                            </label></td>
                                    </tr>
                                    <tr>
                                        <td><span class="txt">Longitude. </span></td>
                                        <td><label>
                                            <input name="txtLong" type="text" class="txtfield" id="txtLong"   value="" readonly="readonly"/>
                                            </label></td>
                                    </tr>
                                </table></td>
                            <td width="10">&nbsp;</td>
                            <td width="350" rowspan="3"><table id="tblSiteInfo" height="325">
                                    <tr>
                                        <td  class="txt"><img src="siteimages/" alt="site"  width="310" height="310"/></td>
                                        <td class="txt"></td>
                                    </tr>
                                </table></td>
                            <td width="25">&nbsp;</td>
                        </tr>
                        <tr>
                            <td>&nbsp;</td>
                            <td>&nbsp;</td>
                            <td>&nbsp;</td>
                            <td>&nbsp;</td>
                            <td>&nbsp;</td>
                            <td>&nbsp;</td>
                        </tr>
                        <tr>
                            <td>&nbsp;</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" value="" readonly="readonly"  /></td>
                                    </tr>
                                    <tr>
                                        <td class="txt">City</td>
                                        <td><input name="txtCity" type="text" class="txtfield" id="txtCity"  value="" readonly="readonly" /></td>
                                    </tr>
                                    <tr>
                                        <td class="txt">State</td>
                                        <td><input name="txtState" type="text" class="txtfield" id="txtState" value="" readonly="readonly" /></td>
                                    </tr>
                                    <tr>
                                        <td class="txt">Postal Code</td>
                                        <td><input name="txtCode" type="text" class="txtfield" id="txtCode" value="" readonly="readonly" /></td>
                                    </tr>
                                    <tr>
                                        <td class="txt">Intersection</td>
                                        <td><input name="txtIntersection" type="text" class="txtfield" id="txtIntersection"  value="" readonly="readonly" /></td>
                                    </tr>
                                </table></td>
                            <td>&nbsp;</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 readonly="readonly" 
                         type="checkbox"   id="chkShared" name="chkShared"  /></td>
                                    </tr>
                                    <tr>
                                        <td class="txt">Host</td>
                                        <td><input name="txtHost" type="text" class="txtfield" id="txtHost" value=""  readonly="readonly" /></td>
                                    </tr>
                                    <tr>
                                        <td class="txt">Guest1</td>
                                        <td><input name="txtGuest1" type="text" class="txtfield" id="txtGuest1"  value=""  readonly="readonly"/></td>
                                    </tr>
                                    <tr>
                                        <td class="txt">Guest2</td>
                                        <td><input name="txtGuest2" type="text" class="txtfield" id="txtGuest2"  value=""  readonly="readonly"/></td>
                                    </tr>
                                    <tr>
                                        <td class="txt">Other Network ID</td>
                                        <td><input name="txtNetwork" type="text" class="txtfield" id="txtNetwork" value=""  readonly="readonly" /></td>
                                    </tr>
                                </table></td>
                            <td>&nbsp;</td>
                            <td>&nbsp;</td>
                        </tr>
                    </table></td>
            </tr>
            <tr>
                <td>&nbsp;</td>
            </tr>
            <tr>
                <td><table width="1050" border="0" cellspacing="0" cellpadding="0">
                        <tr>
                            <td width="25">&nbsp;</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" readonly="readonly" value="" size="55" name="txtMap"/></td>
                                                    <td class="txt">Last Updated&nbsp;&nbsp;
                                                        <input type="text" readonly="readonly" name="txtUpdated" /></td>
                                                    <td class="txt">By&nbsp;&nbsp;
                                                        <input type="text" readonly="readonly" name="txtUpdated" /></td>
                                                </tr>
                                                <tr>
                                                    <td   class="txt" colspan="3" >Comments&nbsp;&nbsp;&nbsp;&nbsp;
                                                        <textarea name="txtcomments" id="txtcomments" style="width: 90%; height: 40px;"></textarea></td>
                                                </tr>
                                            </table></td>
                                    </tr>
                                </table></td>
                            <td width="25">&nbsp;</td>
                        </tr>
                    </table></td>
            </tr>
            <tr>
                <td>&nbsp;</td>
            </tr>
        </table>
        <div class="leftbottom-lite"></div>
        <div class="rightbottom-lite"></div>
        <table width="1050" border="0" cellspacing="0" cellpadding="0">
            <tr>
                <td>&nbsp;</td>
                <td width="79"><input class="buttons"     type="submit" value="Add Site" name="Add" src="CellSites_Add.php"/></td>
                <td width="79"><input class="buttons" type="submit" value="Edit" name="Edit"/></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="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>
[B]<!--wrapper div ends-->
<div class="footer"></div>[/B]
</body>
</html>


You seem to have removed all the IE fixes that I have previously given you so your bottom corners are out in ie6 and the sticky footer code for ie6 has been removed also (I have replaced the sticky footer code but you can sort the corners out yourself :)).

i m seeing the website at 1280 * 800 at full screen in browers but i see scrolls. why? :confused:

I just explained that to you :slight_smile:

What part don’t you understand and I’ll try again?

Have you added the code I gave you to fix the sticky footer?

If you haven’t added this code then you will always have a vertical scrollbar which means that there will be 26px (approx) less width available because of the vertical scrollbar.

I don’t know how many times I can keep saying the same things without sounding rude :slight_smile: