Chrome bug: Grey border showing up in chrome on page load? - css

Question

I am noticing when i first load the page, I am noticing a grey border at the bottom of the chrome. It only happens when i open the browser after clearing all the cache. it does not happen when a 2nd tab is opened for the same page
Can any show me how to fix this and what could be causing this? I am attaching a screen grab below and the entire html and css
I am using Chrome version Version 27.0.1453.94 m
CSS
BODY {
padding:0;
margin:0;
background-color: #8DA3AE;
height:100%;
/* IE10 Consumer Preview */
background-image: -ms-linear-gradient(top, #95ABB6 0%, #6D838E 100%);
/* Mozilla Firefox */
background-image: -moz-linear-gradient(top, #95ABB6 0%, #6D838E 100%);
/* Opera */
background-image: -o-linear-gradient(top, #95ABB6 0%, #6D838E 100%);
/* Webkit (Safari/Chrome 10) */
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #95ABB6), color-stop(1, #6D838E));
/* Webkit (Chrome 11+) */
background-image: -webkit-linear-gradient(top, #95ABB6 0%, #6D838E 100%);
/* W3C Markup, IE10 Release Preview */
background-image: linear-gradient(to bottom, #95ABB6 0%, #6D838E 100%);
height: 100%;
background-repeat: no-repeat;
background-attachment: fixed;
width: 100%;
background-position: 0px 0px;
}
HTML {
height:100%;
}
input{
width: 172px;
}
.WhiteBg {
padding:0;
margin:0;
background: #FFFFFF;
}
/* Messages classes */
.ErrorMessageCSSClass{
color : red ;
}
.InfoMessageCSSClass{
color : blue ;
}
.WarningMessageCSSClass{
color : green ;
}
.MessageCSSClass{
}
/* ----------------------------------------------------------------- */
/* Login Styles */
.LoginPage {
background-image: url("../images/Login.gif");
background-position: center top;
background-repeat: no-repeat;
border-style: solid;
border-width: 1px;
color: #000000;
font: 12px Arial,Helvetica,sans-serif;
height: 405px;
position: relative;
text-align: left;
top: 200px;
width: 480px;
}
.LoginErrorPage {
background: url(../images/Login_error.gif) no-repeat left top;
font: 12px Arial, Helvetica, sans-serif;
color: #000000;
position: relative;
top: 150px;
height: 386px;
width: 432px;
text-align: left;
}
/* Error Message Area */
.LoginErrorLayer {
-x-system-font:none;
border:1px solid;
color:red;
background-color:white;
font-family:Arial,Helvetica,sans-serif;
font-size:12px;
font-size-adjust:none;
font-stretch:normal;
font-style:normal;
font-variant:normal;
font-weight:normal;
line-height:16px;
overflow:hidden;
padding-bottom:2px;
padding-left:5px;
padding-top:2px;
text-align:left;
}
/* Button Normal Size Style */
.BtnLoginStyle {
border: 1px solid #BECDDC;
color: #000000;
display: block;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
height: 23px;
overflow: hidden;
padding: 0;
position: absolute;
text-align: center;
text-decoration: none;
top: 340px;
width: 61px;
}
.BtnLoginStylePressed {
border: 1px solid #BECDDC;
color: #222222;
display: block;
font: 12px/22px Arial,Helvetica,sans-serif;
height: 23px;
overflow: hidden;
padding: 0;
position: absolute;
text-align: center;
text-decoration: none;
top: 342px;
width: 61px;
}
.BtnLoginStyle A.Normal {
font: 12px/22px Arial, Helvetica, sans-serif;
color: #000000;
text-decoration: none;
height: 100%;
width: 100%;
display:block;
text-align: center;
background-image: url(../images/LoginButtonNormal.gif) no-repeat;
}
.BtnLoginStyle A.Pressed {
font: 12px/22px Arial, Helvetica, sans-serif;
color: #000000;
text-decoration: none;
height: 100%;
width: 100%;
display:block;
text-align: center;
background: url(../images/LoginButtonPressed.gif) no-repeat;
}
/* Button Big Size Style */
.BtnBigLoginStyle {
position:absolute;
top:346px;
width:118px;
height:23px;
z-index:1;
overflow: hidden;
}
.BtnBigLoginStyle A.Normal {
font: 12px/22px Arial, Helvetica, sans-serif;
color: #000000;
text-decoration: none;
height: 100%;
width: 100%;
display:block;
text-align: center;
background: url(../images/BigButtonNormal.gif) no-repeat;
}
.BtnBigLoginStyle A.Pressed {
font: 12px/22px Arial, Helvetica, sans-serif;
color: #000000;
text-decoration: none;
height: 100%;
width: 100%;
display:block;
text-align: center;
background: url(../images/BigButtonpRressed.gif) no-repeat;
}
.LoginVerNum {
position:absolute;
left:135px;
top:88px;
width:136px;
height:16px;
z-index:3;
font: 11px Arial, Helvetica, sans-serif;
color: #003984;
}
.LoginProductName {
color: #013A85;
font-family: Arial, Helvetica, sans-serif;
font-size: medium;
font-weight: bold;
height: 17px;
left: 135px;
position: absolute;
top: 107px;
width: 289px;
z-index: 7;
}
.LoginEnterInfo {
position:absolute;
left:206px;
top:196px;
width:187px;
height:20px;
z-index:4;
text-align: right;
}
.LoginFieldBoxArea {
position:absolute;
left:245px;
top:205px;
width:200px;
height:59px;
z-index:5;
}
.LoginEntryBoxDiv {
position:relative;
width:100%;
height:28px;
}
.LoginFieldNameArea {
position:absolute;
left:145px;
top:200px;
width:93px;
height:59px;
z-index:6;
}
.LoginFieldName {
position:relative;
display:block;
height:28px;
text-align: right;
line-height: 17px;
font: 12px Arial, Helvetica, sans-serif;
}
.FieldsStyle {
font: 12px arial;
color: #000000;
width: 100%;
}
.LoginCopyright {
color: #5D5D5D;
font: 10px Arial;
height: 15px;
left: 210px;
position: absolute;
text-align: center;
top: 375px;
width: 240px;
z-index: 2;
}
.LoginOptions {
position:absolute;
text-align: center;
left:282px;
top:258px;
width:174px;
height:25px;
z-index:2;
font: 12px Arial;
text-decoration: underline;
color: #001ad5;
}
.LoginRemember {
position:absolute;
text-align: center;
left:135px;
top:278px;
width:334px;
height:25px;
z-index:2;
font: 12px Arial;
color: #000000;
}
.LoginWarning {
position:absolute;
text-align: center;
left:114px;
top:303px;
width:334px;
height:25px;
z-index:2;
font: 12px Arial;
color: #000000;
}
/* ----------------------------------------------------------------- */
/* Login Styles */
.HelpPage {
background: #FFFFFF url(../images/HelpAboutbg.jpg) no-repeat left top;
font: 12px Arial, Helvetica, sans-serif;
color: #000000;
}
.HelpInfoArea {
position:absolute;
left:10px;
top:257px;
width:411px;
height:7px;
z-index:1;
font: 14px/20px Arial, Helvetica, sans-serif;
color: #FFFFFF;
text-align: center;
}
.HelpAppName {
display:block;
}
.HelpVerNum {
display:block;
}
/*
POLICY PERMISSION
*/
.groupList{
width : 400px ;
height: 388px ;
border: 1 ;
border-color: blue;
}
.viewGroupList{
width : 310px ;
height: 180px ;
border: 1 ;
border-color: blue;
}
.ackGroupList{
width : 310px ;
height: 180px ;
border: 1 ;
border-color: blue;
}
.rightButton{
border: 0 ;
width: 20px ;
height: 20px;
}
.leftButton{
border: 0 ;
width: 20px ;
height: 20px;
}
.selectOneMenu{
width: 150px;
}
.autoCompleteText{
width:320px ;
}
.autoCompleteSuggest{
width:340px ;
border-color: blue ;
}
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<title> </title>
<title> </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- <style type="text/css" media="screen">#import 'css/cas.css';</style> -->
<style type="text/css" media="screen">#import 'css/ie_cas.css';</style>
<style type="text/css" media="screen">#import 'css/loginscreen.css'/**/;</style>
<script type="text/javascript" src="js/common_rosters.js"></script>
<link rel="icon" href="/cas-server/favicon.ico" type="image/x-icon" />
</head>
<body id="cas" onload="init();">
<div id="content">
<SCRIPT>
function showDownImage(id) {
var NAME = document.getElementById(id)
NAME.className="BtnLoginStylePressed"
}
function showUpImage(id) {
var NAME = document.getElementById(id)
NAME.className="BtnLoginStyle"
}
</SCRIPT>
<div align="center">
<form id="fm1" class="fm-v clearfix" action="" method="post">
<div class="LoginPage">
<input class="BtnLoginStyle" id="submit" name="submit" onmousedown="showDownImage('submit');" onmouseup="showUpImage('submit');" onmouseout=showUpImage('submit'); accesskey="l" value="Login" tabindex="4" type="submit" style="left:310px;" />
<input class="BtnLoginStyle" id="reset" name="reset" onmousedown="showDownImage('reset');" onmouseup="showUpImage('reset');" onmouseout=showUpImage('reset'); accesskey="c" value="Cancel" tabindex="5" type="reset" style="left:377px" />
<div class="LoginCopyright">© All Rights Reserved</div>
<div class="LoginVerNum">Version 11.0</div>
<div class="LoginFieldBoxArea">
<div class="LoginEntryBoxDiv">
<input id="username" name="username" class="required" tabindex="1" accesskey="n" type="text" value="" size="25" autocomplete="false"/>
</div>
<div class="LoginEntryBoxDiv">
<input id="password" name="password" class="required" tabindex="2" type="password" value="" size="25" autocomplete="false"/>
</div>
</div>
<div class="LoginFieldNameArea">
<div class="LoginFieldName"><label for="username">User</label></div>
<div class="LoginFieldName"><label for="password">Password</label></div>
</div>
<div class="LoginProductName">Infrastructure /<br>Provisioning
</div>
<div class="row btn-row">
<input type="hidden" name="lt" value="e2s1" />
<input type="hidden" name="_eventId" value="submit" />
</div>
</div>
</form>
</div>
</div>
</body>
</html>

Answer 1

Add background-attachment: fixed; to your your first CSS rule:
BODY {
padding:0;
margin:0;
background-color: #8DA3AE;
height:100%;
/* IE10 Consumer Preview */
background-image: -ms-linear-gradient(top, #95ABB6 0%, #6D838E 100%);
/* Mozilla Firefox */
background-image: -moz-linear-gradient(top, #95ABB6 0%, #6D838E 100%);
/* Opera */
background-image: -o-linear-gradient(top, #95ABB6 0%, #6D838E 100%);
/* Webkit (Safari/Chrome 10) */
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #95ABB6), color-stop(1, #6D838E));
/* Webkit (Chrome 11+) */
background-image: -webkit-linear-gradient(top, #95ABB6 0%, #6D838E 100%);
/* W3C Markup, IE10 Release Preview */
background-image: linear-gradient(to bottom, #95ABB6 0%, #6D838E 100%);
background-attachment: fixed;
}
Demo