I’ve noticed on several sites, including mine, the background images and colours don’t load in parts of the page outside the window. So if your web page is 1000px wide and you’ve got your browser down at 800px wide, the parts that you have to scroll sideways to get to won’t have their background loaded.
See what I mean:
It’s only a problem when the content extends past the window frame; people will have to scroll across to see the content and be faced with ugliness. Strangely, if the window starts out larger than the content area, the backgrounds will continue as you extend the window.
Has anyone seen this before? Does anyone know how to fix it?
You aren’t alone:
http://senna.sjsu.edu/psmith/m.....pping.html
Thread on it:
http://css-tricks.com/forums/v.....#038;t=212
I haven’t dug into it too much, but I suspect it’s how you have the wrap structure set up.
Thanks for the links Chris!
I think it might be a wrap or element thing too… it doesn’t always happen when sites have one main body background.
Hi Kris,
My new layout had the same problem, actually. I found a way around it, which is to use 2 divs for that section. Let’s take your footer. There’s a #footerWrap with a width:100%, and the actual #footerContent with a specific width of, say width:960px and a margin:auto (this part is important to center the inner div). Then, depending on how your images are set up, you can set the background style for each or both divs. I hope that was clear enough. Actually, I think I’ll dedicate a blog post about this bug/fix tomorrow 🙂
PS: Feel free to look through my CSS if you want to see how I did it. Actually, the top navigation still has that bug, but the footer is fixed.
PPS: In your footer, I would set the tiling background on the #footerWrap and leave the #footerContent background clear.
You just need to define a width to 100% on the portions that need scaling, so they expand to the correct width.
like
#footer{width:100%;}
If it’s in a wrapper, pull it out, or make sure the wrapper can reach 100%
I used to have this kind overflowing issue and wrapping it in a with a 100% width did the job well.
Nice blog design you have it here. I just thought that the smiling icons are a bit out of place here. Anyway, just my 4 cents….
Yan
Thanks Yan! I’ll definitely try to fix that 100% thing soon.
Hmm, I hadn’t thought about the smilies in that way. They worked well will previous designs… You may be right. I will think about whether they belong a bit more.
Thanks Gio and Pasquale! I’d hoped that posting this thing might get some useful responses and I was right!
I hope your answers might help others with the same problem if they find this post. I didn’t find anything useful when I was searching the topic myself.
You were right to put this into a blog post – you’ve got some great answers. I didn’t know that 100% width would fix the problem, even though I do use it in my CSS at times.
Aha – I think I’ve found a fix (at least for standards compliant browsers), and I’ve tested it on this site (good old Firebug) – use the CSS attribute for the footer div of “min-width: AApx” where AA is the entire pixel width of the ‘About Me’, ‘Twitter’, ‘Recent Haiku’, and ‘Latest Photos’ div boxes. So I’ve used “min-width: 1000px;”
Hello ,
You try doing the following to fix the problem:
Please add the folowing code in style.css
#footer{overflow:hidden;}
#footer,#header,#nav{min-width:60em;}
this code will fix this bug in FF2/3.
In case you need further help, please do not hesitate to contact us.
For permanent record, the suggestion by MarkupService above does indeed point to the fix.
For elements that have full-width backgrounds and are getting clipped as described in the early part of this discussion, we added the following to them and the problem is solved:
width:100%; min-width:90em;
Special thanks to Kristarella for being so gracious with her mind and time.