1 reply [Last post]
ant1832
Offline
newbie
Last seen: 15 years 52 weeks ago
Joined: 2003-09-26
Posts: 7
Points: 0

I'm trying to get my page to use the full height of my screen 100%. I was able to get it to work fine in Firebird and Opera, but IE extends past the browser window forcing a vertical scrollbar, even tho there is not content to scroll to. Somebody please help Crying

http://dkdesignco.com/v2

@charset "iso-8859-1";
/* author:  */
/* Generated by AceHTML Freeware http://freeware.acehtml.com */
/* Creation date: 9/18/2003 */

/* font settings */
p{font-family: Trebuchet MS,Tahoma, Verdana, Arial, Helvetica, sans-serif;
   font-size: 12px;
   color: #000;
   margin: 0px;
   padding:0px;
}
p.white{font-family: Trebuchet MS,Tahoma, Verdana, Arial, Helvetica, sans-serif;
   font-size: 10px;
   color: #fff;
}

p.white_heading{font-family: Trebuchet MS,Tahoma, Verdana, Arial, Helvetica, sans-serif;
   font-size: 16px;
   font-weight:bold;
    color: #fff;
}
h3{font-family: Trebuchet MS,Tahoma, Verdana, Arial, Helvetica, sans-serif;
   font-size: 18px;
   color: #6096ad;
   margin-bottom: 0px;
   border-bottom:2px #bbd1db dotted;
   width:65%;
}
img{
border: 0px;
border-spacing:0px;
margin: 0px;
padding:0px;
display:block
}

/* end font settings */
table {
font-size: 0px;
color: #ffffff;
padding: 0px ;
margin: 0px ;
border: none;
border-spacing: 0px ;
border-collapse: collapse;
width:100% !important;
vertical-align:top;
height:100%;
}
td {
padding: 0px ;
margin: 0px;
border: none ;
border-spacing: 0px ;
border-collapse: collapse;
vertical-align:top;
}
td.expanded{
height:100%;
}
td.spacing{
width:20%;
}
.nospacing{
height:auto;
}
body, html {
background-color: #ffffff;
margin:0px;
height: 100%;
}

.menu {
background: #ffffff;
background-image:url(images/top_menu_back.jpg);background-repeat: repeat-x;
height: 35px;
width:100% !important;
}
.blue {
background-image:url(images/blue_back.jpg);background-repeat: repeat-x;
height: 26px;
width:100% !important;
}
.yellow {
background-image:url(images/yellow_back.jpg);background-repeat: repeat-x;
border: none;
width:100% !important;
height:63px;
}
.yellowRight {
background-image:url(images/yellow_back.jpg);background-repeat: repeat-x;
border: none;
width:100% !important;
height:63px;
text-align:right;
}
.leftcolumn{
background-image:url(images/left_column.jpg);background-repeat: repeat-y;
border: none;
width: 177px;
vertical-align:top;
text-align:center;
}
.footer{
background: #ffffff;
background-image:url(images/footer_yellow.jpg);background-repeat: repeat-x;
height: 15px;
width:100% !important;
}
.textbody{
padding-left:20px;
padding-top:0px;
padding-bottom:0px;
padding-right:20px;
background: #fff;
text-align: left;
height:auto;
}
.dotted{
border:4px #bbd1db double;
padding:10px;
background:#ffffff;
width:150px;
height:105px;
text-align: center;
vertical-align:top;
margin-bottom:10px;
}
.plain_center{
padding:10px;
width:150px;
text-align: center;
vertical-align:top;
}

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 5 days 7 hours ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5342
Points: 2963

Need help with IE extending past 100% of browser

Hi ant1832,
Footers are always a cross browser problem Sad
What you could try is give the main table a smaller percentage value just for ie. eg 90% instead of 100%;
To get it to work only in ie try body>table{height:90%;} you also may find it easier if you use class names or ids for the tables etc.

Hope that helps.