footer text moves slightly from page to page?

FireFox only

[ewwatson]

Alright... I give up on this one. The copyright moves up and down by a pixel or two between different pages. Go from the Home page to the Diabetes page and look at the footer and you will see. I have tried changing the margins, padding, and line-height on the text in the footer. I can get it to temporarily work but as soon as I change anything above the copyright (i.e. in the #content div) like line-height, add text, and etc it moves the copyright between pages again. Basically the content div is pushing down on the copyright differently depending on the amount of text that is in the article. Because other than the text all the articles pages code is exactly the same. All the footer text is a PHP include if that makes a difference.

I have a theory, the footer (thats where the copyright is) is absolute positioned. Therefore it is taken out of the flow of the document. Could this be the cause of my problem? So if I were to place all the copyright and footer links within another div within the footer div would that bring those back into flow? Like if I gave that new div a position of static or something? Or is it out of the flow regardless because it's sitting inside of an absolute positioned div? Thanks a lot!

[ewwatson]

PS - you can get the footer ul to move with the copyright if you use the right combo of rules. So it effects both - it's just with the current rules it only moves the copyright.

[SuzyUK]

You're Weklcome I enjoy a puzzle ;).. yes I'd say it's a bug, maybe we are the first or maybe the other ones I saw are variations of the same - either way it's not likely to be triggered that often

>>So if it all comes down to height 100% and if the text goes behond the 100% mark

well yes but it actually wouldn't matter what the height was, remember when you took off the border and the text overflowed down behind the footer

This 'bug' will happen whenever the text in the content is long enough to hit/surpass the footer, it's when these lines should overlap that the line height on the footer is going to match/sync with lineheight of the text preceeding/behind it

just because the text is not actually visibly behind the footer in your page.. according to the browser calculations it is so it's still syncing it.

I think there's not much to be done, there's probably ways to minimise the chances of it and I was going to try something else but just got back.. if it works I'll post it if not..I'd say just pick the best option and hope it gets fixed ;)

-Suzy

[ewwatson]

Oh no... your giving up to? I guess when it comes down to it, it's not that big of a deal.

[SuzyUK]

heh! sorry.. but ya know I never really give up, I kind of just let things sit back for a few days and sometimes things just come together

>>not a big deal
maybe not.. tbh I would never had noticed it had I not gone looking for it ;) I guess your visitors will be the same? however I know what it's like when you just know something should work and I'm disappointed that it's FF.

[ewwatson]

OK... like you just said about when I took off the border the text ran long. And that the problem with the cpoyright only happens when the text gets long enough to hit the bottom of the footer.

Well... what if you somehow gave the content padding-bottom of 2000px or something and margin-top -2000px. Or something else? So the content thinks it's never comming in contact with the footer? Crazy or maybe possible?

[SuzyUK]

maybe maybe not. good thought

is that not one of the principles of the holy grail with its -32767 + 32767 margin/padding (don't quote me on these values this is from memory)

if so some browsers have problems with this but perhaps if you fed it with -moz prefixes to protect everyone else.. hmm might work

added.. sorry not Holy Grail- "one true layout"

[edited by: SuzyUK at 6:04 pm (utc) on Mar. 13, 2008]

[ewwatson]

Thanks - What are -moz prefixes?

[ewwatson]

I'm not at my computer right now so I can't test, but actually if I place those rules I just mentioned on the content div I think I would be right back where I started. I am having trouble visualizing this one. Which divs should I put those rules on (padding with negative margin) so that it might do the trick and at the same time not change my layout? Thanks!

[ewwatson]

Also... if the border on the wrapper is holding the content divs text and margin inside the wrapper. Then would the same hold true if I applied a border (same white color obviously) to the content div, and then possibly holding the text within it. Therefore giving the copyright the forcefield that I am after?

[SuzyUK]

Sorry My bad, Mozilla Extensions [developer.mozilla.org] - was reading this earlier and saw padding-start/end same for margin too,. I've no idea if it would help or not should moz require different CSS.. it was just a random throw out thought.

You should see if your large +/- works first then if it does and causes anyone else problems we could look into these to see if they'll help

[SuzyUK]

right I'm not going to get excited or anything you need to test this first, it was the word 'forcefield' that will get the credit if this works

anyway yeuchh.. I so thought I had tried this ealier but who knows, maybe I tried it on the wrong element..

add:

overflow: auto;

to the footer div

<-- fingers xxed

[ewwatson]

Good idea! That seems to work...BUT when increase text size once - you get a vertical scroll bar. Any way around that? overflow hidden did not work.

[ewwatson]

OK... I just tried line-height normal on the body and - still moved. Footer position bottom 0 with margin of 6px - still moved. I made the <p id="copyright"> a li with a two <br> in between - still moved. However, that one made it harder to break. And - I had high hopes for this one - font-family change to Arial or Tahoma - still moved. However worked on all pages until I increased text size. But so does margin-bottom 5.5px. I think the only way this can be fixed for sure is with a rule like you came up with suzy - overflow auto - but we just need to work out the kinks there.

[SuzyUK]

just tested this on your actual pages rather the test case, and I see there's a scroll on the footer I think that's maybe why I tried it and passed over it last time :o..bad bad me!

It should be OK you might have to remove the pixel perfect height off your footer, change to height: auto or leave it to default and let the two line heights take control (your design can take that), loosen up on the line height like we said a bit earlier and allow the extra padding (content bottom margin) that you already were

I can't break it in test so far, and as far as your pages go the WHOLE footer moves if you really really look closely but that is geek level I have to scroll to bottom and watch for it - more to the point this time when the footer moves the two lines of text also move in tandem with it.. in other words is the footer now got its forcefield?

[ewwatson]

Yipeeeee! You did it Suzy. You gave me my forcefield. Man I did a lot of googling, and everything I read said that it was unfixable. You guru you. I don't know if that was good for me or bad? Because now I will foresurley never give up on any future problems. Thanks a lot suzy - I am forever in your debt. Give me a few more months, and maybe I will get the opportunity to get you out of a jam. Thanks again, I hope you have a nice evening!

Man that was bugging the po-po out of me - it's so nice to have that off my head now!

Oh and I just gave the footer an em based height - as you know that got rid of the vertical scroll when you increased text size. I think what you were saying was to keep the height on the footer with line-height on the ul and #copyright, right? I'll try that later - then my footer probably wont get so big as you increase text size. Take care!

[SuzyUK]

Cool!.. we did it.

I don't know if that was good for me or bad? Because now I will foresurley never give up on any future problems.

fwiw I think it's good, it's one thing to accept a problem, it's another to look past the "it can't be dones" and persevere, you can learn a lot along the way. I like the way in another forum (you have been busy!) that you didn't accept the quick fix without the explanation as yes this would've kept cropping up :)

I think what you were saying was to keep the height on the footer with line-height on the ul and #copyright, right? I'll try that later - then my footer probably wont get so big as you increase text size.

yes em height should do it - but to avoid the scroll at all, those pixel rounding errors might get naughty again? .. I suggest no height - instead flesh out the "required" height using a combination of padding on the footer and line-heights of the elements inside the footer

here's all I added to your existing stylesheet:

#footer {
line-height: 1.5 !important;
overflow: auto !important;
height: auto !important;
}

you won't need the !importants if you remove the existing values, this still works as the height is coming from top padding on the ul, but if you remove the padding/margins from the <p> and <ul> you should be able to top/bottom pad the footer to approximate the 60px height once the two lines of text and their line-heights show you how much you need, I think I approximated it 20px split 12/8 - if you do the padding in px rather than ems it will still stop the footer getting "too" big on text resize.

I tested it with various line heights so you should be able to change the 1.5 to suit, in fact you should be able to change whatever to suit.

I did have a nice evening thanks, and You're Welcome just stop coming up with the weird ones OK ;)

-Suzy

[ewwatson]

Hello, man I thought it would take just a second to put in those rules, and that would be it - took me a while to find the right combo. I didn't want to do all this work only to get lazy at the end.

I see what your talking about though, about the footer moving with the text. Height of 6em on the footer works perfect (footer gets a little big, but oh well I can live with that), but any other height on the footer, be it auto or no height at all, the text kept moving. Either that or the footer moved with the text. So I just kept height 6em for the footer. But I am happy - it is now bullet proof.

I see you googled me - I was pretty busy uh? Ya first I started in one forum - they gave up. Then another - they gave up, and so on. So eight different forums in all.

Also thanks for the compliment Suzy. If you haven't seen it yet. You would probably find this thread pretty funny. Or if the link gets removed its the heading of my copyright keeps moving a little over at Killer Websites Forum. You'll see it - it's the one with 50 something posts in it. Ha Ha He He!

[edited by: SuzyUK at 9:49 am (utc) on Mar. 15, 2008]
[edit reason] link snipped [/edit]

[ewwatson]

Just thought you would like to here what others have to say about you and your reputation. This is from over at digital point forums.

Stomme poes
Suzy does a lot of hard work building and testing stuff... I'm much too lazy to do all that work usually... she's also signed up here as Suzy and as cssangel at csscreator too. We need more gurus here at DP.

kk5st
Spirit Walker
At CSSCreator, her nick has been updated to Suzy. She is an amazingly knowledgeable person.

cheers,

gary