Forum Moderators: not2easy
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!
Are you using an external CSS file?
Is the body{margin:...;padding:...} consistent?
body, address, blockquote, dl, ol, ul, li, form, fieldset, h1, h2, h3, h4, h5, h6, p, pre {
margin: 0;
padding: 0;
font-weight: normal;
}
fieldset, table {
border: none;
}
/* --------------- Document Defaults -------------- */
html {
font-size: 100.01%;
height: 100%;
}
body {
margin: 0 auto;
height: 100%;
font: 62.5%/1 "Times New Roman", Times, serif;
background-color: #FEFEF8;
color: #333;
}
/* ------------------ Typography ------------------- */
h2, h3, h4, h5, h6, p, pre, blockquote, address {
margin: 0 0 1em;
}
h1 {
font-size: 1.2em;
text-align: center;
padding: 23px 0 0;
letter-spacing: 1.5px;
}
.small {
font-size: 1.2em;
}
.medium {
font-size: 2em;
}
.large {
font-size: 2.8em;
}
h2 {
font-size: 1.4em;
text-align: center;
font-weight: bold;
}
h3 {
font-size: 1.2em;
font-weight: bold;
}
#content ul {
margin: 0 0 1em 40px;
}
/* -------------------- Layout --------------------- */
* html #wrapper {
height: 100%;
}
#wrapper {
position: relative;
margin: 15px auto 0;
width: 800px;
min-height: 100%;
border: #666 solid 1px;
background-color: #FEFEF8;
}
#header {
height: 90px;
margin: 6px 6px 0;
background-color: #F1F1E4;
}
#nav {
margin: 60px 0 120px;
text-align: center;
}
#content {
margin: 50px 150px 110px;
font-family: Arial, Helvetica, sans-serif;
font-size: 1.2em;
line-height: 1.4;
}
#footer {
position: absolute;
bottom: 6px;
left: 6px;
height: 60px;
width: 788px;
background-color: #F1F1E4;
text-align: center;
}
/* ------------------- Links ---------------------- */
a {
color: #333;
text-decoration: underline;
outline: 0;
}
a:visited {
color: #333;
}
a:active, a:focus, a:hover {
text-decoration: none;
}
#copyright a {
color: #333;
text-decoration: none;
}
#copyright a:visited {
color: #333
}
#copyright a:active, #copyright a:focus, #copyright a:hover {
text-decoration: underline;
}
/* --------------------- Menus ---------------------- */
/* Main Menu */
#nav ul {
list-style: none;
}
#nav li {
font-size: 1.4em;
}
#nav li a {
position: relative;
color: #333;
text-decoration: none;
padding: 0 0 1px;
margin: 0 6px;
display: block;
letter-spacing: 1px;
}
#nav li a:visited {
color: #333;
}
#nav li a:active, #nav li a:focus, #nav li a:hover {
background-color: #F1F1E4;
}
/* Footer Menu */
#footer ul {
padding: 13px 0 0;
list-style: none;
}
#footer li {
display: inline;
word-spacing: 5px;
font-size: 1.4em;
}
#footer li a {
text-decoration: none;
}
#footer li a:visited {
color: #333;
text-decoration: none;
}
#footer li a:active, #footer li a:focus, #footer li a:hover {
text-decoration: underline;
}
/* --------------- Global Classes --------------- */
.center {
text-align: center;
}
.clear {
clear: both;
padding: 0;
margin: 0;
line-height: normal;
}
.floatleft {
float: left;
}
.floatright {
float: right;
}
.hidden {
display: none;
visibility: hidden;
}
.inline {
display: inline;
}
.nomargin {
margin: 0;
}
/* ----------------- Content/Pages ----------------- */
/* Index page */
#copyright {
font-size: 1.2em;
padding: 5px 0 0;
}
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>LITTLEABOUTALOT.com</title>
<link href="styles.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="wrapper">
<div id="header">
<h1><span class="small">LITTLE</span><span class="medium">ABOUT</span><span class="large">ALOT</span><span class="small">.com</span></h1>
</div>
<div id="nav">
<ul>
<li><a href="acne.php">Acne</a></li>
<li><a href="content/best-man-speech.php">Best Man's Speech</a></li>
<li><a href="content/diabetes.php">Diabetes</a></li>
<li><a href="content/diet-&-fitness.php">Diet & Fitness</a></li>
<li><a href="content/finding-quality-child-care.php">Finding Quality Child Care</a></li>
<li><a href="content/modeling.php">Modeling</a></li>
</ul>
</div>
<div id="footer">
<?php include("includes/footer.php"); ?>
</div>
</div>
</body>
</html>
added: code produced by includes/footer.php
<ul>
<li><a href="../index.php">Home</a> • </li>
<li><a href="../about.php">About</a> • </li>
<li><a href="../contact.php">Contact</a></li>
</ul>
<p id="copyright"><a href="../content/copyright.php">Copyright 2007 - 2008</a> <a href="#">Site Design by SomeSiteDesign</a></p>
[edited by: SuzyUK at 8:53 pm (utc) on Mar. 12, 2008]
[edit reason] footer php code added [/edit]
The only thing they all have in common (the common being something changing the height of the copyright) is something above the copyright in the content div. That is where the problem lies. Unfortunately, I can find no differences between the articles - because there is none - the code is the exactle the same. UGH!
So basically I think I am focusing on changing something with the copyright, but the copyright is the effect not the cause.
font-size: 100.01%;
font: 62.5%/1 "Times New Roman", Times, serif;
bottom: 6px;
<?php include("includes/footer.php"); ?>
<div id="wrapper">
...
<div id="footer">
<?php include("includes/footer.php"); ?>
</div>
</div>
</body>
I will continue looking at your stuff and get back...
but I think it's simply a rounding difference, which is affecting the vertical-alignment of the <p>
OK so I looked at your pages as it was the only way to see this.. I then added this to the stylesheet (via Stylish FF add-on)
#footer ul {background: #dad !important;}
#footer p {background: #0f0 !important;}
if you do that in your code you will be able to see/measure that the <p>, the green background, itself does not actually move but the text itself is vertically aligned 1px higher.
Your universal line-height value of 1 is too tight (for the whole document possibly?) - the line-height of an element should be bigger than the font-size to allow space for the ascenders and descenders of text p, g, h. etc.. and I think the default value for line-height is around 1.3
the calculated font-size of the <p> is 12px, the line-height is 1 x 12 = 12px and the height of the element is 12px.. the browser does not have enough room to properly align the text in the <p> and for some reason is making a calculation across the pages differently.
try increasing the line-height, I tried 1.3 (set on #footer} which stopped the text moving though strangely enough even though it fixes the text alignment problem (in my test anyway) the cross-page calculation is still doing something different as the background of the <p> measures 16px on one page and 15px on the other.. but you don't need the backgrounds so..
how weird, same text, same font-sizes, same font-families.. I understand rounding calculations can be different x-browser but same browser, same code :o
-Suzy
Never mind (brain fart)
SuzyUK, sounds like you really got in there and did some digging, thank very much. Isn't it the weirdest thing? Line-height... that was a good idea! Haven't tried changing that on the body yet. But sadly, it did not work cross page. You might be on to something though, I'll keep messing with it. I tried body {line-height: 1.4 and 1.5 and so on}, no go. But now the footer links (ie Home, About, and Contact) move with the copyright. This is so irritating!
I have been working on this for a few of days now, and in a lot of different forums. I got some big-time Gurus to look at this also - they can't find a solution either. But the general concenses is that it has got to be a rounding problem. Paul O'B over at site point forums thought that it was the initial font of 62.5%. He said that firefox has a hard time rounding that number and to try absolute # of 13px instead. And then use percentages on the p, h1, etc. And then give IE, with comments, font size of x-small. Unfortunately, that did not work either? I'll include my response over at site point below. The answer exists - somebody just needs to help me find it! I'll just keep firebugin this thing to death until I find it! Thanks guys!
Hi Paul,
I sort of followed your advise, but instead I used an absolute value of 10px on the body and then everything else was given a percentage (100%, 120% and so on). So this should work exactly the same as your 13px example (aside from a few size changes ofcourse), yet the copyright still moves.
Important thing to note though, it seems to only move, or be diffrent from the others when there is an absence of a lot of text. For intense, all the articles have a lot of text - so when doing the 10px on the body method the copyright does not move on those pages. But on pages with an absence of a lot of text, like the home page, Marriage page, or copyright page - they all move the same but different from the others. So the amount of text has an effect on it?
I also tried 62.4%, 63%, 64%, and so on the body - did nor fix it. I also tried 75% on the body - did not fix it. Is there some rule that could somehow shield the copyright from the content above? Like display table or give the copyright a height or something? Even though I have already tried most everything. However, my everything is not much.
If need be, as a last resort, I could always put the footer back outside the wrapper. Do you think that may relieve this problem? Would being outside the wrapper shield the copyright somehow? I doubt it, because I tried everything before (while the copyright was inside the wrapper), Like padding or margin 100px on the copyright, and then -100px margin to bring it back, and it still moved between pages. I tried the same thing with line-height also. Thanks for anything that you think may help!
#foo{font-size:62.5%;line-height:1.2em} /* actually, this is the default, not 1.3em */
#foo{font-size:62.5%;line-height:120%} /* same thing */
#foo{font:62.5%/1.2em ...} /* same thing, etc. */
[edited by: MarkFilipak at 10:50 pm (utc) on Mar. 12, 2008]
I have been able to recreate it and I think it depends on whether the min-height:100%; of the wrapper is exceeded due to content but also then on the number of lines of text in the content.. though why that's affecting an absolutely positioned elements internal line-height position I don't know
if anyone's interested in wrestling with it.. use the CSS above you can trim out the fat yourself
between the body tags in the HTML above paste this
<div id="wrapper">
<div id="content">
<h2>Diabetes: Management Made Easy</h2>
<p>Diabetes, as it relates to blood sugar<p>
</div>
<div id="footer">
<ul>
<li><a href="../index.php">Home</a></li>
</ul>
<p id="copyright"><a href="../content/copyright.php">Copyright 2007 - 2008</a> <a href="#">Site Design by SomeSiteDesign</a></p></div>
</div>
then save that and duplicate the whole page add more <paragraphs> until the wrapper is stretched by content, then if you flick between the pages (both scrolled to bottom) you should see the copyright paragraph jump up 1px - if you don't then increase the number of lines in the last paragraph 1 at time with me it took 2 or 3 (not even that was constant!).
removing the h2 stopped it happening (though ewwatson's "short" page doesn't have an H2, so that's obviously not true.. but I've not got to a minimum test case yet), removing the border from wrapper stopped it happening which I'm not surprised at as that's involved in the height calculation.
I'm not convinced on the exceeding min-height thing as it still happens if I make the window small enough to cause the 'short' page to scroll too, but that's as far as I've got with it for now, so if anyone else wants to help tear it apart feel free..
I'm just going to check if the line-height solution would be stable regardless of whatever else is going on ;~)
<added> ewwatson I see you answered that for me ..I'll keep digging too then.. like I say above it can be recreated so at least I have now something to work with
ewwatson, try removing the border off the wrapper (just for a test) and see if that works site wide, if it did it would be a clue, also I wonder if adjusting the min-height of the wrapper to 99% would help?
[edited by: SuzyUK at 10:52 pm (utc) on Mar. 12, 2008]
Unitless Line Heights [meyerweb.com]
<ul>
<li><a href="../index.php">Home</a> • </li>
<li><a href="../about.php">About</a> • </li>
<li><a href="../contact.php">Contact</a></li>
</ul>
<p id="copyright"><a href="../content/copyright.php">Copyright 2007 - <?php echo date(Y); ?></a> <a href="http://www.discountsitedesign.com">Site Design by DiscountSiteDesign.com</a></p>
I'll work on your questions tonight Suzy. I just ran up here real quick to give you guys the thumbs up!
Some more info for you - The index page is the only page that has any different code in it. And the only dif is there is a #nav div in place of the #content div. Other than that, everything about all the other pages are exactly the same - except for the text ofcourse. Thanks!
Do you think it could fix this problem if I put the footer outside the wrapper and then used the negative margin method to suck it back in. I had it this way originally, but it was getting to complicated because of the margin around the footer. Plus this way worked (or so I thought), and it was so simple. Thanks again take care!
I'm so tempted to say this is a FF bug (have you tested this in FF3?) I know why it's miscalculating/generating rounding errors but I simply can't figure out why we can't pull the AP footer completely out of the flow, it's being affected by the line height in the content, but why, even z-indexing it to try and pull it up a stack is not working
I've got some very simplified code that recreates this now.. it is all in the lines!
CSS:
html, body {margin: 0; padding: 0; height: 100%;}body {
/*font: 62.5%/1 "Times New Roman", Times, serif;*/
font: 12px arial, serif;
background-color: #fff;
color: #333;
}#wrapper {
position: relative;
z-index: 1;
min-height: 100%;
border: 1px solid #000;
background: #ffc;
}#content {
margin: 0px 150px 50px 150px;
line-height: 1.4;
/*line-height: 1.5;*/
}#footer {
position: absolute;
z-index: 2;
bottom: 0px;
left: 0px;
width: 788px;
width: 90%;
background-color: #abc;
text-align: center;
line-height: 1.5;
}#footer p {
background: #fff;
margin: 5px 10px;
padding: 0;
}HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Short Page</title>
<link href="styles.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="wrapper">
<div id="content">
Diabetes, as it relates to blood sugar<br>
</div>
<div id="footer">
<p>some footer text</p>
</div>
</div>
</body>
</html>
What I do know:
it does only happen on pages with enough content to exceed the 100% min-height
the footer and paragraph themselves does not move it is simply the vertical-alignment of the text.
the page overflows when you take of the border because "contents" bottom margin (which you're using to create space for the footer) then collapses outside the wrapper. but the problem still occurs if you use padding, I tried it even though you probably wouldn't want that as it affects the 100% height.
if you change the line-height of the content (which I have set to 12px in test for easy counting) from 1.4 to 1.5 the problem goes away.. but this is the rounding counting fixed.. I don't think you can get too excited about this as this is controlled test.. it would not be possible with headers. lists, etc.. to ensure all lines were exact pixel values.
12px * 1.4 = 16.8px line-height (this causes the rounding)
12px * 1.5 = 18px line-height makes for nice easy counting in the test but too controlled
anyway, that's enough for tonight, hope there's something in here to spark ideas or confirm bug.. good luck, I look forward to a nice big yippee! tomorrow :)
-Suzy
FWIW, I will never use min-height -- too many bugs (which I determined a long time ago).
Are you initializing your CSS? I have developed a setup.css to initialize the browsers. I won't bother you with the details (unless you ask)
[edited by: SuzyUK at 10:14 am (utc) on Mar. 13, 2008]
[edit reason] removed off topic [/edit]
I remember reading earlier in this thread the FF has rounding errors. I can assure you that this is absolutely not true. How do I know? I've tested the bejabbers out of it. FF carries subpixel precision to at least 2 decimal points (and I think, 4 decimal points but I didn't go further as 2 decimal points was enough for me).
BTW, IE does not carry any subpixel precision whatsoever. So if 1.75em converts to 21.858585...pixels, IE either makes it 21px or 22px (not sure about rounding or integer truncation).
Are you initializing your CSS? I have developed a setup.css to initialize the browsers. I won't bother you with the details (unless you ask)
I don't know what that means? Thanks!
I remember reading earlier in this thread the FF has rounding errors. I can assure you that this is absolutely not true.
any more luck yet ewwatson? I'm going to try and find a solution today.. as I think a 'fix' is outwith CSS, if it is simply a quirk of FF's rendering there's not a lot we can do for now perhaps, though I'll follow it up at Mozilla, but it would be helpful if someone could check out the code on FF3 to see if it's still going the same thing
-Suzy
height: auto !important; /* real browsers */
height: 100%; /* IE6: treaded as min-height*/
min-height: 100%; /* real browsers */
OK a quick trip to Mozilla does indeed show many bug reports (though they're not confirmed so it could be a "feature") which reference line-height and rounding errors. The thing I'm getting is that Gecko uses cumulative rounding so instead of making the calculation per line which would solve this they add all the lines and round at that point.. that pretty much what we were saying about the number of lines affecting the outcome.
I also came across some older bugs where Gecko wasn't happy with using unitless line-heights but these have been reported as fixed, though I also still tried the example code with units em and % it made a difference as in 140% worked but 1.4em didn't but even using percent once I added another line or two the problem came back.
I do not know all the rules that could possible accomplish this - but something like display table, or display table-cell, or another div within the footer div with a z-indez higher or something. There has to be some rule to take it out of the flow or put a force field around it!
How can I post links? If not, how can anyone ever figure anything out?
Edit - If you take away some text on one so that it is less than 100% height and leave all the text on the other - then the footer text moves here to. Strange!
you would think ;)
& yes that was my thoughts behind z-indexing it however there's too much to take in about the stacking context themselves.. as far as I see it the footer is a child in the wrappers stacking context, because of the z-index on wrapper.. setting the z-index on the footer is making it create a new stacking context for its children but they're all still descendants of the wrapper and still tied to it for their painting
I too tried moving the footer out of the wrapper, which I know you've already tried, but that didn't work and it's getting a bit complex for a pixel which is playing peekaboo.. am also trying to go through some of the moz proprietary properties to see if there's anything in there which might help.
nothing like a puzzle heh!
no, now that you know what it is, and it's inbuilt in FF - it will always happen, it just that you will only rarely notice it if line-heights require rounding and with e.g. sticky footers or footers which have plain text..
hang a minute.. why wasn't it happening to the horizontal list that was in your footer originally, why only the <p> or plain text, what's the difference there then?
gotta go for now
#footer ul {
margin: 13px 0 .55em;
list-style: none;
}
I tried faction numbers for the line-heights - still moved. So if it all comes down to height 100% and if the text goes behond the 100% mark. Then in there is the answer to this puzzle. I tried height 101% - still moved. I even tried putting in non breaking spaces and <br> tags between the ul and the copyright and then a negative margin to bring it back - still moved. I hate to say it but I am nearing the point were I give up. This is not healthy for my brain. Take care. Oh... and thanks again for working on this Suzy - I really appriciate it!
