See image for example. This happens in IE8 and Opera 10.62 (I didn't test other browsers). Basically, if your browser window is not wide enough, the footer is a bit broken when you scroll.
-
1Reproduced in Chrome 6.0.472– jjnguySep 29, 2010 at 21:16
-
Reproduced in Opera 10.62 build 6438 on Ubuntu 10.04 64-bit.– uɐɯsO uɐɥʇɐNSep 29, 2010 at 21:17
-
After playing around with the CSS files... I still can't determine why that's happening. Time to fire up jsFiddle, I guess.– uɐɯsO uɐɥʇɐNSep 29, 2010 at 21:21
-
I found the problem!– uɐɯsO uɐɥʇɐNSep 29, 2010 at 21:29
-
Repro in FF 3.6.10 as well. Nice find.– Jon SeigelSep 30, 2010 at 1:35
-
Am I missing something? Nothing seems to have changed.– BrianFeb 10, 2011 at 23:00
Add a comment
|
2 Answers
I suggest the following solution instead of George's:
#footer {
/* Current styles */
min-width:960px;
}
This preserves the current behavior of the footer stretching page wide while still fixing the bug.
answered Sep 29, 2010 at 23:46
-
Good job. Although I intended for the footer to just be centered, this looks much nicer. Sep 30, 2010 at 0:02
-
+1: Not only does this look nicer, it also properly matches the existing behavior when the window is expanded. Very easy to implement, too.– BrianSep 30, 2010 at 13:13
I have found the problem and the solution.
The problem:
<div id="footer">
<div class="footerwrap">
...
The solution:
<div id="footer" style="width: 960px;">
<div class="footerwrap">
...
Notice the addition of style="width: 960px;".
This forces the bottom bar to be the same width as the rest of the page.
Update: It is also necessary to include:
margin-left: auto; margin-right: auto;
in the style parameter. This centers the bar along the bottom.
answered Sep 29, 2010 at 21:29
-
This breaks the footer (a different way) once you make your browser window wide again. Sep 29, 2010 at 22:41
-
-
Right, it centers the footer, but the background doesn't extend all the way to the left and right. Sep 29, 2010 at 22:57
-