I am struggling to understand why Safari is adding a white space at the bottom of the image on my current website project.
Interestingly, Firefox and Chrome display it correctly. The image should stay fixed at the bottom of the page even when resized.
Here is some of the HTML code:
<!-- Page Content -->
<div class="container-fluid">
<div class="span12">
<div id="headImage">
<img class="center fit" src="images/Dale2.png" onmousedown='return false;' ondragstart='return false;'>
</div>
</div>
<!-- ./container -->
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" language="JavaScript">
function set_body_height() { // set body height = window height
$('body').height($(window).height());
}
$(document).ready(function () {
$(window).bind('resize', set_body_height);
set_body_height();
});
$('img').bind('contextmenu', function (e) {
return false;
});
$(document).ready(function () {
$(".center").hover(function () {
$(this).attr("src", "images/DaleBlurWithText.png");
}, function () {
$(this).attr("src", "images/Dale2.png");
});
});
</script>
</body>
And here is the corresponding CSS:
body {
max-height:100%;
min-height: 100%;
background-color: white;
padding-top: 50px;
overflow: hidden;
-webkit-overflow-scrolling: touch;
}
.navbar {
background: white;
border: none;
}
.navbar-brand nav navbar-nav {
text-align: center;
}
.navbar .navbar-nav {
display: inline-block;
float: none;
vertical-align: top;
margin: 0;
}
.navbar navbar-collapse {
text-align: center;
}
* {
padding: 0;
margin: 0;
}
.fit {
/* set relative picture size */
max-width: 100%;
max-height: 100%;
}
.center {
display: block;
margin: auto;
bottom-fixed: 0;
vertical-align: bottom;
}