Forum Moderators: not2easy
I have a box model page and it works fine with IE7 & firefox. However, on <b>IE6, the scrolbar do not get displayed properly</b>. when the browser is minimised to hide the content, Horz scrol bar never appears & vert scrol bar works wrongly.
Please can someone advice me how this can be fixed? <b>Pls compare IE6 Vs Firfox or IE7</b> to the difference.
Thanks in advance.
RKM
------------
The trimmed HTML code is:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd" ><html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Scrolbar bug IE6</title>
<style type="text/css">@import url(css/defaultIE6Bug.css);</style>
</head>
<body id="qm_PARTICIPANT_LOGIN">
<div id="qm_HEADER">
<div class="qm_BANNER"><img alt="" src="xx.gif"></div>
<div class="qm_WELCOME">
<div class="qm_HEADER_WELCOME_TEXT">Welcome : Guest</div>
<div class="clear"></div>
</div>
</div>
<div id="qm_DOCUMENT">
<form name="login" method="post" autocomplete="off">
<div class="qm_BOX">
<div class="qm_BOX_COL">Please enter your name and password below</div>
<div class="qm_BOX_ROW">
<div class="qm_BOX_COL_LEFT">Name: </div>
<div class="qm_BOX_COL_RIGHT"><input class="text" name="name" type="text"></div>
<div class="clear"></div>
</div>
<div class="qm_BOX_ROW">
<div class="qm_BOX_COL_LEFT">Password: </div>
<div class="qm_BOX_COL_RIGHT"><input class="text" name="password" type="password"></div>
<div class="clear"></div>
</div>
<div class="qm_BOX_COL_FOOTER"><input type="submit" class="button" title="Enter" value="Enter"></div>
</div>
</form>
</div>
<div id="qm_FOOTER">
<div class="qm_CONTROL"></div>
<div class="qm_FOOTNOTE">This software will not expire.</div>
</div>
</body>
</html>
-------------------------------
and trimmed css code is:
/* CSS Document */
/* Build No: @BUILD_NUMBER@ */
html {
height:100%;
max-height:100%;
padding:0;
margin:0;
border:0;
overflow: hidden;
}
body {
height:100%;
max-height:100%;
overflow:hidden; /* overflow:auto; for IE6? */
padding:0;
margin:0;
border:0;
}
/* the main page area, between Header and Footer */
#qm_DOCUMENT {
position: absolute;
left: 0px;
right: 0px;
overflow: auto;
margin: 0px;
top: 59px; bottom: 44px;
}
/* header shown at the top of all pages */
#qm_HEADER {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
margin: 0px;
height: 55px;
}
/* footer shown at the bottom of all pages */
#qm_FOOTER {
position: absolute;
bottom: 0px;
left: 0;
width: 100%;
margin: 0px;
height: 44px;
}
/* workaround to ensure that form elements do not take up visible space in tables */
form {
margin: 0px;
padding: 0px;
display: inline;
}
.clear {
clear: both;
margin: 0;
padding: 0;
}
/* --- HEADER ELEMENTS --- */
.qm_WELCOME {
padding: 4px 7px 4px 7px;
background: #FFF url(shadow_tile.gif) repeat-x top;
border-bottom: 1px solid #CCC;
overflow: hidden;
width: auto;
}
.qm_HEADER_WELCOME_TEXT {
float:left;
width:auto;
margin-top: 5px;
}
.qm_BANNER {
padding: 3px 0 3px 7px;
text-align: left;
}
/* --- LOGIN ELEMENTS --- */
.qm_BOX {
border: 1px solid #CCCCCC;
width: 400px;
margin-top: 100px;
margin-left: auto;
margin-right: auto;
text-align: left;
}
.qm_BOX div {
padding: 3px 7px;
}
.qm_BOX div div {
padding: 0;
}
.qm_BOX_COL {
width: auto;
}
.qm_BOX_ROW {
position: relative;
padding: 0;
overflow: hidden;
}
.qm_BOX_COL_LEFT {
width: 100px;
float: left;
margin: 3px 4px 0 0;
text-align: right;
}
.qm_BOX_COL_RIGHT {
float: right;
width: 280px;
}
.qm_BOX_COL_RIGHT div {
margin: 3px 0 0 0;
font-weight: bold;
}
.qm_BOX_COL_FOOTER {
text-align: right;
background: #EAEAEA;
margin-top: 4px;
}
input.text { width: 270px; }
input.button { width: 60px; margin: 2px 4px 2px 0; }
/* --- FOOTER ELEMENTS --- */
.qm_CONTROL {
background: #E7EFF7 url(banner_bg.jpg) repeat-y right;
padding: 3px 0 3px 7px;
height: 20px;
}
.qm_FOOTNOTE {
background: transparent; /*#ECE9D8 url(shadow_tile.gif) repeat-x top; */
font-size: 7pt;
padding: 4px 7px 4px 7px;
height: 24px;
}
--------------------------
Marshall
I referred - [digital-web.com...]
