html - Safari Allows Text to Flow into Footer Only when Length Doesn't Cause Scrolling -
i have problem appears in safari 6.0.5 on os x 10.8.4 under condition. works fine in firefox , chrome on os x under tested conditions. haven't tested ie or on windows.
the problem 3 column layout uses floats position columns. in example code included, if text in third column short enough allow space between , footer , entire page fits in viewport, displays correctly. if bit longer, column text flows footer. if long enough flow out of viewport causing scrolling, works correctly. can test moving bottom of browser window , down.
the page has code creates sticky footer. see of code in #force-full-page , #push in style.css. don't think have problem if wasn't using it.
given works in firefox , chrome, suspect safari bug. there wrong code , got lucky other browsers? if bug, there work in safari? don't have problem pages don't use floats.
i remember there site load code people test. don't remember name of it. still around? if so, i'll load code it.
the html in 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 mission</p> </section> </header> <div id="bounding-box"> <section class="body-title"> <h1>welcome test web site</h1> <p>lorem ipsum dolor sit amet, consectetur adipisicing elit, sed 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 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 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 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 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 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 define focus styles! */ :focus { outline: 0; } /* remember highlight inserts somehow! */ ins { text-decoration: none; } del { text-decoration: line-through; } /* tables still need 'cellspacing="0"' in markup */ table { border-collapse: collapse; border-spacing: 0; } style.css
@charset "utf-8"; /* css document */ html { height: 100%; /* required #force-full-page */ } body { height: 100%; /* required #force-full-page */ background-color: #bdcadb; color: #000000; } #force-full-page { margin: 0 auto -11.25em; /* last parm must 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 add section above push division clear.
html:
<!-- ... --> </section> <section class="body-footer"> <p>loren ipsum</p> <section> <div id="push"></div> css:
.body-footer { clear:both; } it's not fix problem, it's nice work around needed footer anyway.
Comments
Post a Comment