I have a problem that only appears in Safari 6.0.5 on OS X 10.8.4 under a certain condition. It works fine in Firefox and Chrome on OS X under all tested conditions. I haven't tested it IE or on Windows.
The problem is with a three column layout that uses floats to position the columns. In the example code included, if the text in the third column is short enough to allow space between it and the footer and entire page fits in the viewport, it displays correctly. If it is a bit longer, the column text flows into the footer. If it is long enough to flow out of the viewport causing scrolling, it works correctly. You can test it by moving the bottom of your browser window up and down.
The page has code that creates a sticky footer. You see most of the code for it in #force-full-page and #push in style.css. I don't think I would have this problem if I wasn't using it.
Given that it works in Firefox and Chrome, I suspect a Safari bug. Could there be something wrong with my code and I got lucky with the other browsers? If it is a bug, is there something I could do to get it work in Safari? I don't have this problem with pages that don't use floats.
I remember there was a site were you could load code for people to test. I don't remember the name of it. Is it still around? If so, I'll load the code to it.
The html in 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; /* Must equal foot-box height: */
}
#page-footer
{
clear: both;
background-color: #336799;
}
#footer-box
{
position: relative;
height: 9.75em; /* Must equal #push height: */
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; /* 2.8em */
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;
}
A work around is to add a section just above the push division that does a clear.
html:
<!-- ... -->
</section>
<section class="body-footer">
<p>Loren ipsum</p>
<section>
<div id="push"></div>
css:
.body-footer { clear:both; }
It's not a fix for the problem, but it's a nice work around as I needed that footer anyway.