I’ved tried following the Sticky Footer tutorial and now got it sitting at the bottom of the screen however when I scroll horizontally it is also scrolling.
Yes, unlike position: fixed, sticky things are not fixed to the viewport, meaning whatever’s in the footer can actually be reached.
So, if you really want your footer to act like your header, then you probably do really want a fixed footer. I just wondered if the sticky footer would work for you better. This does mean the footer will always be on-screen. It will cover up content if the screen is too small, so you’ll still use the padding idea for Content the same way it was used in the sticky footer: it’ll let people scroll down to see the rest of the content, leaving some room for the footer to sit over without always covering content.
I still can’t get to your menu in the header unless I make my screen huge. It just goes off-screen and is unreachable. Looks like you’re going for visitors with screens at least as big as 1024. While that’s not unreasonable, just be aware there’s more variety out there, plus the power users who minimise their browsers (they’ll figure out they need to enlarge their browsers real fast though so not a huge deal). Smaller screens are out there, popular, and won’t work with this page. Mobiles and pda’s who can’t zoom are out.
i noticed as well when i view in 1024x768 that it sits at the bottom of the page but when i scroll vertically it appears half way on the page
There are some terribly wrong things on this page. Half of the problem is the HTML5 junk: if you’re going to use it, use it. But if you have to double and triple your code just to get it working in all currently-used browsers, that’s a big hint NOT to use it. All you’re doing with this HTML5 is doubling and tripling your code. Lots and lots and lots of your code is doing NOTHING at all except sitting there, making it harder for you to find your errors and repeats. <nav> wrapping divs wrapping uls… the whole point of <nav> was to replace ul’s, but it’s pointless: it’s not more semantic than a ul, and screen readers still recognise <ul> as an unordered list, while still not knowing what a <nav> is.
Your code is repeating itself, conflicting with itself, and generally acting like those cartoon characters who punch themselves in the face.
You have div id=“content” twice. The validator should have caught that. Always validate your code when you run into problems. You can still have problems and no invalid code, but so long as there is invalid code that you don’t know about, you’re wasting time bug-hunting.
You have stuff floated all over the place, but none of the containers are enclosing them! You set heights on the “par” things in your <section>, but the content inside is much, much taller! Which is why it’s a bad bad idea to set heights on things unless you know what’s going to happen (this is why the #container has min-height: 100% for the sticky footer).
So, what you ended up having was, main page content was NOT pushing down the footer. In a sticky footer, the content pushes the footer down, but if the content is shorter than the body (tall screen), the footer stays tucked at the bottom of the 100%-high page #container.
In order to get the sticky footer working for your page, I had to change many things. *edit but I ended up just using the fixed footer instead, based on our comments about scrolling
First, I just went back to HTML4 because even though I have Firefox, there was too much unknown to me and I needed to be sure the HTML5 elements weren’t somehow causing the problem. I’m going to try to convert it back to HTML5 and see if it still works… it should, but we’ll see. The stylesheet explicitly set the main tags to display: block, even though as far as I know those are already blocks, but maybe they don’t act the same when floated, etc. So for now I’ve made them divs because I know their behaviour.
Next thing I did was removed that HTML5 stylesheet. I noticed you repeated a lot of stuff in your master stylesheet that should have worked from your HTML5 stylesheet. The problem is that you imported it incorrectly:
you had comments above the @import line. In a CSS stylesheet, any @imports MUST be first, before comments. That’s why you had to re-declare stuff.
And, the reset in there is awful. It’s based on the one Eric Meyer is horribly ashamed of (if he isn’t, he should be). It’s an excellent example of lots and lots and lots of code that, other than making pages less accessible and making debugging harder, does absolutely nothing but take up bytes.
I could rant further about that, but for now, I just took it out. You can add in anything from it that you find you need for a particular element, but you’re only shoving an arrow through your foot and holding yourself to the ground with that reset. Esp since it even removed Meyer’s warning to add “focus” styles back in… which not only does nobody do, but nobody seems to understand why it’s there and just think it’s ugly. I fixed this by leaving outline in, AND adding :focus to your :hover statements. Keyboarders wanna know where they are too.
You can keep the line that sets all the HTML5 elements to display: block. So far as I know, they’re already blocks, but maybe not all browsers recognise that, or maybe it’s for IE in conjunction with that Javascript you have?
I’ve got a very small reset in my example.
Then I took the <section> tag, made it a <div id=“section”> and let that box determine the width of the page.
Actually, you could do what I did on my horizontal site: I used ErikJ’s negative right margin trick. This way, as you add “par” divs, the width still extends… so you don’t have to set a width: 4000px, meaning the width will always adjust to the number of “par” divs you have! Just like a vertical page. Only issue with that is, there’s a limit to page widths and heights in Opera and Konqueror… and maybe other browsers. Your negative margin can’t exceed that amount (it’s the same amount you see in the Sticky Footer code, in teh hack for Opera from ErikJ… that’s Opera’s limit).
*edit, did this in my version
Then I made sure the #container really was 100% high (when you make someone 100% high, you don’t want to then add in top or bottom margins, padding or borders…). I think Paul’s version maybe gave the #container a negative top margin, but because you’re already getting weird with the header, I just did the sticky footer I’m more comfortable with: leave the #container alone and just pull the footer up with a negative top margin.
You had
margin: -50px;
that must’ve confused a lot of browsers. I think you meant
margin-top: -50px;
which makes sense for a sticky footer.
Since I went ahead and made it fixed, none of this applies. I also removed the fixes for Opera and IE8 because I’m not sure if they’re needed for fixed footer stuff.
I removed most of the positioning you had. General rule of thumb, if you want to keep your sanity and your hair, don’t go around positioning everything unless you’re being VERY funky. Fixed header and footer aren’t that funky, really.
So what about the header? After making sure Content only existed once (instead of also inside the first <section> tag), and then making sure it enclosed its floats (using :after and a retarded way of triggering haslayout, but there are plenty of ways), then I just used more padding tricks.
Content has enough top padding to leave room for the fixed header, plus some for more room. Nobody will ever see it, because the header will be sitting right on top of it, or it’ll be offscreen.
I haven’t extensively tested this:
Gonna see if I can HTML5 that. Even so, I dunno what that IE-javascript-thing does, but it’s bogus if it can’t make a regular HTML5 page work, cause I would just
<nav>
<li><a href=“foo”>First list item</a></li>
…
</nav>
that was the plan, anyway. Not wrapping several divs and other strange boxes around every menu.
Let me know if you find an issue with the demo above… I didn’t boot up the windows machine, and IE is the one who’s most likely to have some problem with this.
Actually I remember IE6 has a problem with position: fixed. Paul O’B’s got a demo somewhere that works for IE6 though. It’ll need position: absolute unless your Javascript is fixing that for you.