Encountering a unique issue solely in Safari 6.0.5 on OS X 10.8.4 within certain conditions, which doesn't exist when tested on Firefox or Chrome under various scenarios in OS X. The column layout with floats is the crux of the problem. When the text length in the third column leaves enough space above the footer to fit the entire page into view, it displays correctly. However, if the text extends further and encroaches upon the footer or spills out of the viewport requiring scrolling, the issue arises. Modifying the browser window height can demonstrate this behavior.
A component on the page establishes a sticky footer, with significant code present in #force-full-page and #push in style.css. It's possible that this issue is arising due to the utilization of the sticky footer method.
The fact that this functions seamlessly in Firefox and Chrome but falters in Safari suggests a potential bug in Safari. Could the problem stem from my code instead, receiving a lucky break with other browsers? If indeed a browser glitch, are there measures I could undertake to rectify the situation specifically for Safari? Instances without float implementation don't exhibit this flaw.
Recollection hints at a site enabling code testing by others; although the name escapes me currently. Is this platform still active? If so, I'm inclined to upload the code for examination.
The HTML content resides within a PHP file:
<?php
?>
<html>
<head>
<title>Test Web Page</title>
<meta http-equiv="Content-Type" content="text/html; charset=">
<link href="../test/screen.css" rel="stylesheet" type="text/css">
</head>
<body class="home">
<div id="force-full-page">
<header id="page-header">
<section id="header-box">
<h2>Test Website</h2>
<p class="sub-heading">State your mission</p>
</section>
</header>
<div id="bounding-box">
<section class="body-title">
<h1>Welcome to the Test Web Site</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</section>
<section class="left-column">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</section>
<section class="middle-and-right-columns">
<section class="middle-column">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</section>
<section class="right-column">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</section>
</section>
<div id="push"></div>
</div> <!-- /bounding-box -->
</div> <!-- /force-full-page -->
<footer id="page-footer">
<section id="footer-box">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</section>
</footer></body>
</html>
screen.css
@import url("reset.css");
@import url("style.css");
reset.css
@charset "utf-8";
/* CSS Document */
/* Courtesy of Eric Meyer
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
/* remember to define focus styles! */
:focus {
outline: 0;
}
/* remember to highlight inserts somehow! */
ins {
text-decoration: none;
}
del {
text-decoration: line-through;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
border-collapse: collapse;
border-spacing: 0;
}
style.css
@charset "utf-8";
/* CSS Document */
html
{
height: 100%; /* Required for #force-full-page */
}
body
{
height: 100%; /* Required for #force-full-page */
background-color: #bdcadb;
color: #000000;
}
#force-full-page
{
margin: 0 auto -11.25em; /* Last parm must be the sum of #footer-box height: + padding: */
min-height: 100%;
height: auto !important;
}
#page-header
{
background-color: #336799;
}
#header-box
{
position: relative;
height: 10em;
width: 62em;
margin: 0 auto;
background-color: #336799;
}
#bounding-box
{
position: relative;
width: 62em;
margin: 0 auto;
}
.container
{
position: relative;
width: 62em;
margin: 0 auto;
background-color: #336799;
}
.left-column
{
float: left;
width: 20em;
}
.middle-and-right-columns
{
float: right;
width: 42em;
}
.middle-column
{
float: left;
padding-left: 1em;
width: 20em;
}
.right-column
{
float: right;
padding-left: 1em;
width: 20em;
}
#push
{
height: 9.75em;
}
#page-footer
{
clear: both;
background-color: #336799;
}
#footer-box
{
position: relative;
height: 9.75em;
width: 62em;
margin: 0 auto;
padding-top: .25em;
padding-bottom: 1.25em;
color: #021730;
}
.body-title
{
margin-top: .5em;
text-align: center;
}
h1
{
font-family: 'Trebuchet MS', Arial, sans-serif;
font-size:2.4em;
line-height: 1.25;
margin: 1.25em 0 1.25em 0;
}
h2
{
font-family: 'Trebuchet MS', Arial, sans-serif;
font-size: 2.0em;
line-height: 1.5em;
margin: 1.5em 0 1.5em 0;
}
h3
{
font-family: 'Trebuchet MS', Arial, sans-serif;
font-size: 1.6em;
font-weight:normal;
line-height: 1.5625;
margin: 1.5625em 0 1.5625em 0;
}
h4
{
font-family: 'Trebuchet MS', Arial, sans-serif;
font-size: 1.125em;
line-height: 1.375em;
margin: 1.375em 0 1.375em 0;
color: inherit;
}
p , dd, ul
{
font-size: 1.125em;
line-height: 1.375em;
margin: 1.375em 0 1.375em 0;
color: inherit;
}
#page-header h2
{
font-family: 'Trebuchet MS', Arial, sans-serif;
font-size: 2.0em;
line-height: 1.0em;
margin: 0 0 0.5em 0;
color: #bdcadb;
color: #ffffff;
}