SitePoint Sponsor |
|
User Tag List
Results 51 to 70 of 70
-
Apr 28, 2009, 06:29 #51
- Join Date
- Nov 2007
- Location
- Malaga, Spain
- Posts
- 1,072
- Mentioned
- 4 Post(s)
- Tagged
- 0 Thread(s)
k, had free time, and i made a paul/maleika mix result, featuring the best of both solutions
Code CSS:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Sticky Footer at Bottom</title> <style type="text/css"> * {/* for demo only*/ margin:0; padding:0 } html, body { height:100%;/* needed to base 100% height on something known*/ } #outer { width:760px; background:#ffffcc; margin:auto; min-height:100%; margin-top:-40px;/*footer height - this drags the outer 40px up through the top of the monitor */ } /* #inner protects any floats in the content from clearing the minheight float */ #inner { width:760px; overflow:hidden;/* you could use float:left if you wanted content to overflow*/ /* background:#ffffcc; If floated instead of overflow:hidden then repeat #outer background color here */ } #header { background:red; border-top:40px solid #fff; /* soak up negative margin and allows header to start at top of page*/ } #footer {/* footer now sits at bottom of window*/ background:red; width:760px; margin:auto; height:40px;/* must match negative margin of #outer */ clear:both; } /*Opera Fix*/ body:before { content:""; height:100%; float:left; width:0; } /*Opera Fix*/ /*IE8 Fix*/ #outer:after { content:""; float:left; width:0; height:100%; overflow:hidden;/* just in case*/ } /*IE8 Fix*/ </style> <!--[if lt IE 8]> <style type="text/css"> * html #outer {height:100%}/* ie6 needs this*/ .minheight{display:none}/* ie6 and 7 don't need this */ </style> <![endif]--> </head> <body> <div id="outer"> <div id="inner"> <div id="header"> <h1>Sticky Footer</h1> </div> <p>test</p> <p>test</p> <p>test</p> <p>test</p> </div> </div> <div id="footer">Footer</div> </body> </html>
-
Apr 28, 2009, 07:36 #52
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
Thanks Yurikolovsky
Taking your lead here is another amalgamated version making the best of all worlds also.
Code:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Sticky Footer at Bottom</title> <style type="text/css"> * {/* for demo only*/ margin:0; padding:0 } html, body { height:100%;/* needed to base 100% height on something known*/ } #outer { width:760px; background:#ffffcc; margin:auto; min-height:100%; margin-top:-40px;/*footer height - this drags the outer 40px up through the top of the monitor */ } /* #inner protects any floats in the content from clearing the :before float */ #inner { width:760px; overflow:hidden; /* you could use float:left instead of overflow:hidden if you wanted content to overflow*/ /* background:#ffffcc; If floated instead of overflow:hidden then repeat #outer background color here */ } #header { background:red; border-top:40px solid #fff; /* soak up negative margin and allows header to start at top of page*/ } #footer {/* footer now sits at bottom of window*/ background:red; width:760px; margin:auto; height:40px;/* must match negative margin of #outer */ clear:both; } /*Opera Fix*/ body:before { content:""; height:100%; float:left; width:0; } </style> <!--[if (lte IE 6)|(gte IE 8)]> <style type="text/css"> #outer {height:100%;display:table;} </style> <![endif]--> </head> <body> <div id="outer"> <div id="inner"> <div id="header"> <h1>Sticky Footer</h1> </div> <h2>Works in ie5/6/7/8, Opera 9 and 10, Firefox 2+, Safari 3 (and probably every other modern browser)</h2> <p>test</p> <p>test</p> <p>test</p> <p>test</p> </div> </div> <div id="footer">Footer</div> </body> </html>
Last edited by Paul O'B; May 4, 2009 at 01:46.
-
Apr 28, 2009, 08:14 #53
- Join Date
- Nov 2007
- Location
- Malaga, Spain
- Posts
- 1,072
- Mentioned
- 4 Post(s)
- Tagged
- 0 Thread(s)
i bet someone will make a even smaller/lighter version out of this :]
by the way, i have never seen
Code:<!--[if (lte IE 6)|(gte IE 8)]> <style type="text/css"> #outer {height:100%;display:table;} </style> <![endif]-->
also its a much better way of fixing the ie8 bug, its like 3 worlds now xD
edit:
it also looks stable enough to be used in a real world website without any fear.
also whoever finds this, looking for a sticky footer demo will definitely find this much more useful than all the other crappy sticky footers that i see all over the internet.
also you just gotta love the simple design of this solution.
-
Apr 28, 2009, 13:27 #54
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
[quoet]
by the way, i have never seen
[/quote]
Yes there are a number of operators that you can use within conditional comments such as "!"= "not" and "|" = "or".
There's a full rundown here.
edit:
it also looks stable enough to be used in a real world website without any fear.
-
Apr 29, 2009, 00:43 #55
- Join Date
- Nov 2007
- Location
- Malaga, Spain
- Posts
- 1,072
- Mentioned
- 4 Post(s)
- Tagged
- 0 Thread(s)
thanks for the link on conditional comments, very informative.
edit:
this code in the comments section
Code:<!--[if IE 7 ]><div id="IE7"><![endif]--> <!--[if IE 6 ]><div id="IE6"><![endif]--> <p>regular html content</p> <!--[if (IE 6)|(IE 7)]></div><![endif]--> p {/* code for standard browsers*/} div#IE6 p {/* code for IE6 */} div#IE7 p {/* code for IE7 */}
the only question here is.
do the normal browsers (not ie) download the external stylesheets within ie's conditional comments?
if not then the above is pointless (it is slightly faster for ie), if yes, then the above is a better way of doing ie specific code.
it is definitely a better approach for small sites that require very few website-wide ie fixes.
-
Apr 29, 2009, 01:59 #56
- Join Date
- Aug 2007
- Location
- Netherlands
- Posts
- 10,287
- Mentioned
- 51 Post(s)
- Tagged
- 2 Thread(s)
As I understand it, conditional comments to a non-ie browser are treated like comments period. They must be loaded, they appear in View Source, but other than that, browsers take no consideration of them.
IE-CC-placed elements who are addressed in the regular css sheet are treated by browsers as declarations for elements that don't exist in the HTML.
If you're calling a <link> to an IE stylesheet in the <head> inside an IE-CC then the non-IE browsers don't do the GET request, but they see the comment in the <style> tag. If I look at my headers, Firefox doesn't call
<if IE blah blah>
<link rel="stylesheet" blah blah.... ie-only.css">
</endif blah blah>
from the server.
-
Apr 29, 2009, 02:14 #57
- Join Date
- Nov 2007
- Location
- Malaga, Spain
- Posts
- 1,072
- Mentioned
- 4 Post(s)
- Tagged
- 0 Thread(s)
Stomme poes
If I look at my headers, Firefox doesn't call "blah.blah.ie-only.css"
>now why didn't i think of checking my headers in firefox!?!
thinking some more about that method, it is definitely better for the ie part of the internet, especially in small websites with little ie-only css.
(in terms of performance)
(the gain might be minimal, but small+small = medium)
-
May 7, 2009, 18:04 #58
- Join Date
- Oct 2008
- Location
- Whiteford, Maryland, United States
- Posts
- 13,782
- Mentioned
- 16 Post(s)
- Tagged
- 0 Thread(s)
Next quiz time??
Always looking for web design/development work.
http://www.CodeFundamentals.com
-
May 8, 2009, 01:37 #59
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
Hi Ryan,
I have one lined up for Sunday (or Saturday if I can get through my workload by then)
-
May 8, 2009, 01:49 #60
- Join Date
- Nov 2007
- Location
- Malaga, Spain
- Posts
- 1,072
- Mentioned
- 4 Post(s)
- Tagged
- 0 Thread(s)
it seems in not the only one with a workload then xD
-
May 8, 2009, 02:17 #61
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
Yes work always gets in the way of having a good time
-
May 8, 2009, 04:45 #62
- Join Date
- Oct 2008
- Location
- Whiteford, Maryland, United States
- Posts
- 13,782
- Mentioned
- 16 Post(s)
- Tagged
- 0 Thread(s)
I think it should be saturday morning..
Always looking for web design/development work.
http://www.CodeFundamentals.com
-
May 8, 2009, 13:56 #63
-
May 17, 2009, 11:28 #64
Hmm, My copy of IE8 seems to be rendering the older sticky footer layouts just fine now. Perhaps the IE development folks viewed this thread and corrected the problem in a recent windows update.
Paul, is your Ultimate Sticky Footer working in IE8 for you now?
It does for me!Ray H.- css-lab.com
W3C Specs - CSS 2.1 | CSS current work | Properties Index
-
May 18, 2009, 00:55 #65
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
-
May 18, 2009, 01:29 #66That one isn't working in My IE8 (8.0.6001.18702). It works in compatibility view but not in IE8 for real.
Is there a newer version than mine about?
I have compatibility view turned off also and all my sticky footer layouts are working now. I remember viewing them back at the time of this quiz and sure enough they didn't work, hence the reason for the quiz. I assumed that there may have been a fix added to IE8 in one of my recent windows updates. I don't know what the deal is, I'll double check again.Ray H.- css-lab.com
W3C Specs - CSS 2.1 | CSS current work | Properties Index
-
May 18, 2009, 02:00 #67
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
That's strange let me know what you find out.
I would have assumed the version number would have been changed if IE8 had been updated.
Remember the problem with IE8 is not on first page load but only when you try to resize the viewport vertically.
-
May 18, 2009, 08:15 #68
Hi Paul,
Ok, that's what I was missing. Reading back through your first post of this thread I see where you explained that and sure enough they are not working. That is the same problem with IE7 and the height:auto!important; rule.
Sorry about the confusion, I'll get the IE8 fix updated on my demos asap.Ray H.- css-lab.com
W3C Specs - CSS 2.1 | CSS current work | Properties Index
-
May 18, 2009, 10:10 #69
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
Thanks Ray
Hopefully it will be a bug that gets addressed sometime soon.
-
Sep 16, 2009, 05:09 #70
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
Update
A fix for the extra wrapper needed due to the opera fix can be found here:
http://www.sitepoint.com/forums/show...80#post4377680
and amalgamated into this demo.
Thanks to Erik and Ray for pursuing this further
Bookmarks