I am having an issue where my sticky footer works in IE and FF but not in Chrome and it's driving me nuts. In Chrome, if you size the window big enough (both in width and height) you can see the white gap between the end of the footer and the bottom of the window. This doesn't happen in FF or IE weirdly. Any thoughts or comments would be appreciated. Thanks so much!
J
<html>
<head>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<style type="text/css">
html, body {
height: 100%;
margin: 0pt;
font-size: 13px;
font-family: 'Open Sans', sans-serif;
}
.Frame {
display: table;
height: 100%;
width: 100%;
}
.Row {
display: table-row;
height: 1px;
}
.Row.Expand {
height: auto;
}
.ATS-header{
background-color:#EEEEEE;
}
.ATS-footer{
background-color: #002955;
color: #fff;
padding: 10px 0;
}
table {
display: table;
border-collapse: separate;
border-spacing: 2px;
border-color: gray;
}
.error_msg_class {
padding-right: 15px;
text-align: right;
font-weight: bold;
color: red;
padding-bottom: 10px;
}
.loginContainer {
width: 360px;
padding: 5px;
border: 1px solid black;
-moz-box-shadow: 3px 3px 3px #000;
-webkit-box-shadow: 3px 3px 3px #000;
box-shadow: 3px 3px 3px #000;
}
.modal-dialog {
width: 350px;
margin: 25% auto;
}
@media (min-width: 768px) {
.modal-dialog {
width: 350px;
margin: 15% auto;
}
}
.modal-title, h6 {
font-weight: bold;
color: white;
}
.modal-header {
padding: 9px 15px;
border-bottom: 1px solid #eee;
background-color: #1057A7;
-webkit-border-top-left-radius: 5px;
-webkit-border-top-right-radius: 5px;
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 5px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
label {
width: 8em;
float: left;
margin-right: 0.3em;
display: block;
}
</style>
</head>
<body class="Frame" >
<div class="ATS-header">
<div class="container">
<header class="Row" >
<h1>company logo</h1>
</header>
</div>
</div> <!-- end of ATS header -->
<section class="Row Expand">
<div class="main-content">
<div class="container">
<h2>Login</h2>
<p>If you are a previous user of our system, a unique Username and Password has already been assigned to you. All you need to do is to use this username and password to proceed.</p>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td valign="top"><div class="loginContainer">
<form id="atsLogin" name="atsLogin" method="post" action="">
<table width="100%" class="NoBorderTableOverride" border="0" cellspacing="1" cellpadding="1">
<tr>
<td width="40%"> Username : </td>
<td><input type="text" id="atswebid" name="atswebid" value="" class="inputTextLayout" /></td>
</tr>
<tr>
<td> Password : </td>
<td><input type="password" name="atswebpass" class="inputTextLayout" /></td>
</tr>
<tr>
<td> </td>
<td><a data-toggle="modal" href="#popup" data-target="#popup">Forgot Your Username/Password?</a></td>
</tr>
<tr>
<td> </td>
<td><div class="divSubmitButton">
<input type="submit" name="Submit" value="Submit"/>
<input type="hidden" id="logaccess" name="logaccess" value="members" />
</div></td>
</tr>
</table>
</form>
</div></td>
</tr>
</table>
<br>
<p>Lid est laborum dolo rumes fugats untras. Etharums ser quidem rerum facilis dolores nemis omnis fugats vitaes nemo minima rerums unsers sadips amets. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui.Ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius m ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit.</p>
</div> <!-- main-content -->
<!-- modal -->
<div id="popup" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true" style="color:white">×</button>
<div class="modal-title">
<h6>Forgot Username/Password</h6>
</div>
</div>
<div class="modal-body">
<form id="forgot_pass_form" name="forgot_pass_form">
<p>
<label for="forgot_lastname">Last Name</label>
<input type="text" id="forgot_lastname" class="inputTextLayout" />
</p>
<p>
<label for="forgot_email">E-mail</label>
<input type="text" id="forgot_email" class="inputTextLayout" />
<br />
</p>
</form>
<div id="form_response" align="center" class="error_msg_class"></div>
</div>
<div class="modal-footer">
<button type="button" class="btn-primary" id="forgotpassButton">Submit</button>
<button type="button" class="btn-small" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div> <!-- end of modal -->
</div> <!-- end of main-content -->
</div> <!-- end of the container -->
</section>
<footer class="Row">
<div class ="ATS-footer">
<div class ="container">
<div class="col-sm-2"> company logo</div>
<div class="col-sm-7">
<p>Lid est laborum dolo rumes fugats untras. Etharums ser quidem rerum facilis dolores nemis omnis fugats vitaes nemo minima rerums unsers sadips amets. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
</div>
<div class="col-sm-3">
<p>Lid est laborum dolo rumes fugats untras. Etharums ser quidem rerum facilis dolores nemis omnis fugats vitaes nemo minima rerums unsers sadips amets. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. </p>
</div>
</div>
</div>
</footer>
</body>
</html>
I figured it out. I had to change
to
and that did the trick!!