Safari enables seamless text flow into the footer without triggering scrolling as long as the length is manageable

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;
}
htmlcsssticky-footersafari

Answer №1

To address this issue, you can insert a new section right above the push division with a clear command.

Here is an example of how it can be implemented in your HTML code:

<!-- ... -->
</section>
<section class="body-footer">
    <p>Lorem ipsum</p>
</section>
<div id="push"></div>

Additionally, include the following CSS style for the body-footer class:

.body-footer { clear:both; }

While this solution may not completely solve the problem, it serves as a practical workaround especially if you require the footer functionality.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Modify the color of CSS for all elements except those contained within a specific parent using jQuery

I have a color picker that triggers the following jQuery script: //event.color.toHex() = hex color code $('#iframe-screen').contents().find('body a').css('color', event.color.toHex()); This script will change the color of al ...

javascriptjquerycssdom

Is the z-index functioning properly for the header call-to-action text on mobile devices, but not on desktop?

The desktop header cta is functioning properly, but when I switch to mobile nothing happens. I attempted to increase the z-index number within the html instead of in the style sheet. This is where my CTA is located in the html: CALL TO ACTION surrounded ...

htmlcssz-index

Arranging inline-flex elements within a div container

I have been struggling to position two elements side by side within a single div, where the second element should be on the right side. <div className={classes.container}> <div className={classes.first}> First </div> <d ...

cssflexboxmaterial-ui

Is there a way for me to establish a maximum word count for a paragraph?

When my paragraphs get lengthy, I only want the first 30 words to display on two lines. Is there a way to achieve this using HTML, CSS, or JS? The code snippet I tried did not work as expected. .long-text{ width: 70ch; overflow: hidden; white-sp ...

htmlcss

When choosing the child option, it starts acting abnormally if the parent option is already selected in Angular

I am encountering an issue while trying to select the parent and its children in the select option. The concept is to have one select option for the parent and another for the child. I have parent objects and nested objects as children, which are subCatego ...

javascripthtmlangulartypescript

I can't seem to figure out why this isn't functioning properly

Upon examining the script, you'll notice the interval() function at the very bottom. The issue arises from bc-(AEfficiency*100)/5; monz+((AEfficiency*100)/5)((AFluencyAProduct)/100); For some reason, "bc" and "monz" remain unchanged. Why is that so? T ...

javascripthtmlcssintervals

What is the proper way to request permission for allowing others to access the mailto function?

I want to create a feature where users can open email on click using JavaScript. However, I have encountered an issue with using the mailto function in Chrome, as it requires changing the handlers settings to make it work. My query is whether it is possib ...

javascripthtml

Does CSS positioning change depending on the screen size?

I need help fixing the positioning of my logo on the screen. I want it to be 40px from the top and centered horizontally regardless of the screen size. Here is the code that I have: <html> <head> <style type="text/css> body{ back ...

htmlcsspositioning

Creating an HTML table by populating it with data from a JavaScript array

Imagine you have a JavaScript array structured like this: [ "Heading 1", "Heading 2", "Data 1", "Data 2", "Data 3", "Data 4", ] Your task is to generate an HTML table from this array that looks like the one in this link: https://i.stack.imgur.com/7laUR. ...

javascripthtmlcss

Retrieve the value of a PHP array within a for loop and transfer it to JQuery

*edited format I came across a PHP code for a calendar on the internet and I am currently working on implementing an onclick event that captures the date selected by a user as a variable (which will be used later in a database query). At this point, my g ...

phpjquerycssarrays

Designing a dynamic button with changing colors using html and css

Is there a way to design a button with a starting color of red, but changes to orange when the mouse hovers over it? I am looking to add this type of button to my website. ...

htmlcss

Discovering specific keywords within HTML tags and performing replacements using jQuery

I am searching for specific strings within my HTML code, and if I find them, I want to replace them with nothing. For example: HTML: <img src=`javascript:alert("hello ,world!")`> My goal is to locate keywords like javascript, alert, etc, within H ...

javascriptjqueryhtml

Is it possible to set spacing between the rows of an HTML table without also setting spacing for the columns?

Is there a way to add spacing between the rows of a table without affecting the columns? ...

htmlcsscss-tables

Can a webpage be redirected to another page after an animation using only HTML and CSS?

My goal is to design a landing page that has a button allowing users to trigger an animation before being redirected to another page. This concept involves adding a captivating element before transitioning between pages, similar to a link with a dynamic ...

htmlcss

The addition of input fields on keyup creates problems in the initial field of each row

I am currently working with a table and attempting to calculate the sums as follows: td(1) + td(2) + td(3) = td(4), td(5) + td(6) + td(7) = td(8), td(9) + td(10) + td(11) = td(12). This is the code I have implemented: $(document).ready(function () { ...

javascriptjqueryhtml

Click here to access the identical page

Longtime follower of stackoverflow but only my second time posting a question. Here is the code I am currently working on: echo "<td><a href = 'http://localhost/map/index.php' value='$id' >Delete</a></td>"; ...

phphtml

Trick for using :checked in CSS

Is it possible to change the color of a deep linking div using an input checkbox hack in the code below? <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /&g ...

htmlcsssass

What could be causing Html.checkboxfor to fail in updating the boolean value of the model?

I am currently working on a project where customers can select multiple users to remove them from the database. The issue I'm facing is that the checkboxes are not changing or sending the isSelected variable, which tells the server which users should ...

c#htmlasp.netmodel-view-controller

Tips for managing table scroll in a flexbox design

Check out the demo here I am working with a table that has an indefinite number of rows and columns. When the table has a small number of rows and columns, it adjusts its width according to the available page space minus the width of the sidebar. Everythi ...

htmlcssangularflexboxangular-flex-layout

Tips for emphasizing the current element without disrupting existing styles

Is there a way to highlight an element with a border without causing it to shift? The script seems a bit glitchy when detecting mouse leaving the area. I'm unable to override parent element properties like border or outline. I also can't use pse ...

javascripthtmlcss