Comments on: Weird CSS background loading issue

By: jaced

jaced — Thu, 20 Nov 2008 17:46:56 +0000

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.

By: Markup Service

Markup Service — Sun, 31 Aug 2008 19:07:41 +0000

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.

By: Jonathan

Jonathan — Sun, 31 Aug 2008 17:09:26 +0000

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;”

By: Tracey Grady

Tracey Grady — Fri, 29 Aug 2008 11:37:09 +0000

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.

By: kristarella

kristarella — Thu, 28 Aug 2008 13:06:59 +0000

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.

By: kristarella

kristarella — Thu, 28 Aug 2008 13:04:22 +0000

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.

By: Yan Shall Blog

Yan Shall Blog — Thu, 28 Aug 2008 08:03:49 +0000

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

By: Pasquale

Pasquale — Wed, 27 Aug 2008 13:35:45 +0000

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%

By: Gio

Gio — Wed, 27 Aug 2008 06:58:40 +0000

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.

By: kristarella

kristarella — Wed, 27 Aug 2008 04:24:45 +0000

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.