I've got a page with a footer at the bottom that's supposed to stick to the bottom of the viewport, unless the port is shorter than the content, in which case it should slide down out of view so it doesn't cover the content.
I'm using a layout I read about in Joseph Lowery's 'CSS Hacks & Filters' and it's working great except for Safari (which he admits is problematic in this case).
The outer 'page' div expands vertically to the full height of the content, and the footer attaches to the bottom of this div, so if the content is longer than the viewport the footer is below, out of sight (until you scroll down), but when the content is shorter than the viewport, 'page' expands to the viewport height.
The child-hack switching to height: auto is necessary for Mozilla PC, but kills Safari (the bar stays below the content, but doesn't attach to the bottom of the viewport, so there's an ugly space beneath it).
If I could just hide the commented rule below from Safari it'd be fixed - but nobody seems to know of a way to hide from Safari. I suppose the alternative would be to SHOW to JUST the geckos.
Any ideas?
The relevant CSS:
#page {
position: absolute;
top: 0;
left: 0;
}
html, body, #page {
min-height: 100%; /* for gecko-based browsers */
width: 100%;
height: 100%; /* for IE */
}
/* this rule needs to be hidden from Safari, and shown to gecko browsers */
html>body, html>body #page {
height: auto; /* override height: 100% for gecko - but breaks Safari */
}
And the HTML:
<div id="page">
<!--CONTENT HERE-->
<div id="footer"></div>
</div>http://diveintomark.org/archives/2003/11/12/safari
I wouldn't consider that :lang() hack to be future safe though. Although they might make Safari behave more like Mozilla before or at the same time they add support for :lang().Actually I found a good one - put an exclamation point after a declaration and all following styles will be ignored by Safari - so:
#hide_from_safari { font-size: 1em; ! } /* dummy rule, not used in document */
/* all following styles hidden from safari */
I'm using a layout I read about in Joseph Lowery's 'CSS Hacks & Filters' and it's working great except for Safari (which he admits is problematic in this case).
The outer 'page' div expands vertically to the full height of the content, and the footer attaches to the bottom of this div, so if the content is longer than the viewport the footer is below, out of sight (until you scroll down), but when the content is shorter than the viewport, 'page' expands to the viewport height.
The child-hack switching to height: auto is necessary for Mozilla PC, but kills Safari (the bar stays below the content, but doesn't attach to the bottom of the viewport, so there's an ugly space beneath it).
If I could just hide the commented rule below from Safari it'd be fixed - but nobody seems to know of a way to hide from Safari. I suppose the alternative would be to SHOW to JUST the geckos.
Any ideas?
The relevant CSS:
#page {
position: absolute;
top: 0;
left: 0;
}
html, body, #page {
min-height: 100%; /* for gecko-based browsers */
width: 100%;
height: 100%; /* for IE */
}
/* this rule needs to be hidden from Safari, and shown to gecko browsers */
html>body, html>body #page {
height: auto; /* override height: 100% for gecko - but breaks Safari */
}
And the HTML:
<div id="page">
<!--CONTENT HERE-->
<div id="footer"></div>
</div>http://diveintomark.org/archives/2003/11/12/safari
I wouldn't consider that :lang() hack to be future safe though. Although they might make Safari behave more like Mozilla before or at the same time they add support for :lang().Actually I found a good one - put an exclamation point after a declaration and all following styles will be ignored by Safari - so:
#hide_from_safari { font-size: 1em; ! } /* dummy rule, not used in document */
/* all following styles hidden from safari */