Minor CCS bug (and possible solution)

Minor CCS bug (and possible solution)

in Forum and Website Bugs

Posted by: Protoavis.9107

Protoavis.9107

This came up in another thread and I figured I might as well stick it here so that it may be corrected

At least on windows 7 (can’t remember if XP had the functionality) when you drag the browser to either side so it auto fills only half the screen you and a horizontal scroll bar is created, dragging it across will result in the background being cut off (image 1 below). Now if you paid attention you might be thinking, “Hey, he’s using Opera, no uses that, it’s just an Opera bug”

Nope it’s IE (image 2) and FF also, so it’s likely all browsers on a desktop (didn’t check on other media devices).

The issue is because the background images are defined in a parent element while the width is defined in a child element (ie css id “header” has the background image but the child element class “wrapper” is where the 960px width is defined, same is true for css id content and footer) which results in elements of the layout being able to sit outside the background ground as the parent element is being told to size to the screen but the child elements underneath it are being told to size to 960px width. In the cases were the screen is less than 960px wide you’ll end up with the attached images.

The easiest solution (although I’m not at liberty to say how appropriate it is as I’m not 100% sure what the site specifications are intended to be or if there’s responsive design going on…I haven’t checked on other media devices besides desktop) may just be to stick in the css “min-width:960px;” on the id’s which control the background (“header”, “content” and “footer”).

Attachments:

Let us buy vendor mats (eg spools of thread) in 250 stacks, end the excessive clicking.