homepage Welcome to WebmasterWorld Guest from 54.197.147.90
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderator: open

CSS Forum

    
Faux column issue with body background
IE and Safari switch background image orientation when browser gets small
Don_Hoagie




msg:3206492
 3:23 am on Jan 3, 2007 (gmt 0)

I'm on a roll of stupidity baby! Can't figure this one out either...

body {
margin: 0;
padding: 0;
background: #101111 url(body_strip.gif) 50% 0 repeat-y;
text-align: center;
}
#wrapper {
position: absolute;
top: 0;
left: 50%;
width: 960px;
margin-left: -480px;
background: transparent;
}

This is my first foray into a fixed-width design over 750px... In IE6 and Safari 2.0.4, if you cut your browser down to less than 960px of window real estate (960px is the width of the background image on the body which creates three faux columns), the background image only gets cropped on the right side, as if the browsers are saying, "ok, sure you have a centered layout, but when things get dicey, we're going to load this image from the left and crop it on the scrollbar side... because we own you".

What's up with this? FF and Opera correctly (seems correct to me at least) crop the background image from BOTH sides, keeping the background centered and thus cropping the space of the two outer columns equally.

Any ideas?

 

penders




msg:3206939
 4:25 pm on Jan 3, 2007 (gmt 0)

Have you tried...?
background: #101111 url(body_strip.gif) center top repeat-y;

Although, admittedly, that is *supposed* to be the same.

Don_Hoagie




msg:3207169
 7:42 pm on Jan 3, 2007 (gmt 0)

I hadn't tried that, but alas, I just did.... and got no love.

SuzyUK




msg:3207187
 8:04 pm on Jan 3, 2007 (gmt 0)

along the same lines.. but I think there was something weird about the order of shorthand properties

so instead of
background: #101111 url(body_strip.gif) 50% 0 repeat-y;

try

background: #101111 url(body_strip.gif) repeat-y 50% 0;

and if that doesn't do it perhaps setting position: relative; on the body element might help?

[edited by: SuzyUK at 8:05 pm (utc) on Jan. 3, 2007]

Don_Hoagie




msg:3207235
 8:47 pm on Jan 3, 2007 (gmt 0)

Hmm, I've never tried setting positioning on the <body> before.... I worked in your line of code just now, and when that didn't work, I set the body to pos:rel, top:0, left:0. Got Nada.

I mean, shouldn't this be an evident issue with other sites? We're talking IE6 here... I'd think someone would've noticed this problem already if there's nothing I'm doing wrong.

At any rate, thanks to both of you for your advice

[edited by: Don_Hoagie at 8:49 pm (utc) on Jan. 3, 2007]

SuzyUK




msg:3207337
 10:12 pm on Jan 3, 2007 (gmt 0)

you would think! but with all the different variations possible sometimes issues don't make themselves evident until you figure out what else is on the page, hence it becomes much more difficult to try and think what someone else might have done

I don't think I've come across a case of this before so I would be inclined to do a "strip to basics" exercise, even taking out things I thought I knew about - so get the background working first then figure out why/how it might be different for others

if you can strip it to just the body background and give us an example of that then you have something to compare.. if not you have a set of circumstances!

penders




msg:3207501
 2:01 am on Jan 4, 2007 (gmt 0)

Having had a bit of a play... I don't think the problem is your background-image on the BODY tag. In itself it works OK in both FF and IE6. But your #wrapper DIV (to centre your layout I presume) is throwing things around a bit.

...a fixed-width design...

If the browser window gets narrower than your fixed width, then I would have thought that the desired effect would be that your page gets chopped on the right, with a horizontal scroll bar that gives you access to what has been chopped. (Afterall, your background-image wants to be centred within your page, not the browser window...?)

However, with your choice of #wrapper, the content does indeed remain centred, but at the cost of sliding the content to the left and becoming inaccessible (due to the effect of a negative left margin). You get a horizontal scrollbar, but you can only scroll right, not left. (Someone else's project I have been involved in recently uses this same technique to centre things vertically - it does suffer horribly though at small browser sizes - but the boss likes it?!)

FF is keeping the background centred in the viewport (the area of the window you can see). IE6 is also keeping it centred, but centred in the BODY of the page, which scrolls off to the right. FF, on the face of it, may look better... but I kinda wonder whether IE6 is actually doing the right thing in this instance?!

An alternative approach (*maybe*) is to set the background-image on the #wrapper DIV (for it to work in FF and IE6, and since your bkgrd is 960px and your layout is also 960px there is no real need to centre the background?) and change your #wrapper style a tad...

body {
margin:0;
padding:0;
text-align:center;
}

#wrapper {
position:relative;
margin:0 auto;
width:960px;
background: #101111 url(body_strip.gif) 0 0 repeat-y;
text-align:left;
}

...a possible snag is that your background-image is now only the height of your #wrapper.

Don_Hoagie




msg:3207571
 3:14 am on Jan 4, 2007 (gmt 0)

Suzy, I stripped everything in the HTML but the body and the wrapper (and a <p> so I could see how the wrapper content behaves) and still see the same issue. With the wrapper stripped, the background operates as I want it to. So even though I don't understand what that means, perhaps my option here- since I'm using abs-pos- is to forgo a wrapper altogether?

Penders, that's a good point about the left side being inaccessible... but strangely enough, looking at it now, none of the browsers seem to get that aspect right. Safari (I don't have IE at home so I'll check tomorrow) does change the orientation of the body background image, but it DOESN'T change the orientation of the content. So while the body background pays attention to your rule, the left column of content is still totally inaccessible via the horizontal scroll, just like you said it would be in FF and Opera.

And yeah, the problem with your fix is that it totally obliterates the benefit of faux columns... I might have to end up doing something with that though... god forbid I throw some javascript on the body tag to get equal columns...

Don_Hoagie




msg:3207614
 3:58 am on Jan 4, 2007 (gmt 0)

Update: I stripped out the wrapper and just position the three columns using 50% as the x-orientation and negative margins to stick them in their proper spots... the body background STILL misbehaves. So the notion of getting rid of the wrapper doesn't solve anything.

But on the bright side, my shower isn't clogged anymore.

SuzyUK




msg:3207707
 7:16 am on Jan 4, 2007 (gmt 0)

I'm still wasn't getting it.. :o

I'm with penders in that if the image is for faux columns then surely you don't want any of it to crop rather you would perhaps like it to produce a horizontal scroll?

as to your original statement FF and Opera are correct by 'cropping' it both sides - the wrapper div does not exist, it's out of the flow, and it's not forcing the body/html width and 50% center is the middle of the image centered in the middle of the screen.

a min-width on the body (960px) *should* correct the inaccessible content issue in FF et al, because it should then be forcing the width to at least contain the width of your content/image - *however* that's not helping IE (not even 7?) and it doesn't quite work for FF/Opera in this case either.

forgetting about IE for a bit and wondering why forcing a width onto body wasn't working I had to go search.. I found this little obscurity:

14.2 The background [w3.org]
The background of the root element becomes the background of the canvas and covers the entire canvas, anchored (for 'background-position') at the same point as it would be if it was painted only for the root element itself. The root element does not paint this background again.
......
For HTML documents whose root HTML element has computed values of 'transparent' for 'background-color' and 'none' for 'background-image', user agents must instead use the computed value of those properties from that HTML element's first BODY element child when painting backgrounds for the canvas, and must not paint a background for that BODY element. Such backgrounds must also be anchored at the same point as they would be if they were painted only for the root element.

sure enough as per the second bit of that if you add a background color to the html element (to force the body rather than root to use the image) the positioning of the background image on the body element (with a min-width on body to force the scroll) stabilises but of course no longer stretches vertically, as it's no longer the "canvas"

All of which means I would use a wrapper div to hold the background, and force it's height - maybe this is why I've not noticed it before too, because of IE it's been notoriously difficult to use the body element as a container of any sort and wrapper divs abound ;).

anyhow after a bit of tweaking I came up with the following which I think might fit what you want (might even help your inaccessible left content problem penders?)

<style type="text/css" media="screen">
html, body {
margin: 0;
padding: 0;
border: 0;
background: #101111;
height: 100%; /* to get wrapper div to take a height */
}

body {
position: relative; /* compliant browsers need this to honour min-width */
min-width: 960px; /* to force page to contain all columns */
text-align: center;
}

#wrapper {
position: absolute;
top: 0;
left: 50%;
margin-left: -480px;
width: 960px;
min-height: 100%; /* so short pages fill the background */
background: #101111 url(image960.gif) repeat-y 50% 0;
}

p {line-height: 3;}
</style>
<!--[if lt IE 7]>
<style type="text/css" media="screen">
body {width: 960px;} /* this won't center probably need some kind of min-width expression */
#wrapper {height: 100%;} /* will stretch as needed - instead of min-height */
</style>
<![endif]-->

not sure if I like using an AP div to contain everything, it can cause problems with printing, but you can negate it in a print stylesheet if it works for you

Suzy

[edited by: SuzyUK at 7:23 am (utc) on Jan. 4, 2007]

Don_Hoagie




msg:3208853
 2:35 am on Jan 5, 2007 (gmt 0)

Wow... i admire your persistence in helping with someone else's problem Suzy!

I'll have to work with this a bit to see what happens... I guess at this point though it's debatable whether I shouldn't just use some javascript to create equal columns... but, given the effort you guys have put forth in trying to help me solve the issue, I'd hate to cop out now.

I'll see what I get for results and get back to ya'll tommorrow. Thanks again!

[edited by: Don_Hoagie at 2:36 am (utc) on Jan. 5, 2007]

SuzyUK




msg:3209239
 1:34 pm on Jan 5, 2007 (gmt 0)

You're Welcome Don,

It blew out the Holiday cobwebs for me, haven't been around the recs for a while!

note in the conditional, IE6 and below will still need some sort of script/expression to mimic min-width - I was too lazy to do that bit :o let us know how it goes and what you decide on using

Suzy

Don_Hoagie




msg:3209782
 9:09 pm on Jan 5, 2007 (gmt 0)

Suzy, after a bit of tweaking with my bucket'o'content in place, your fix did work... but I started thinking to myself, am I really doing the world of standards any more justice by hacking up this CSS than I would be if i just kept it simple and imported an equal columns javascript function? So I'm gonna go with that... if I decide to make changes to the layout, I feel like that route will make things easier on me, as I'm sure I won't remember in 2 years the rationale behind these CSS fixes. The downfall is that the left side content will indeed become inacessible to users with smaller monitor resolutions... I guess only time will tell if that will become a big problem. But the site's not due out for another 6-8 months, so you gotta figure that the contingent of 800x600ers will be on the fast track to obscurity by then.

Nevertheless, twas interesting to see some of the less famous quirks of different browsers play out... and as always, commendable brainstom-ery on the part of the WebmasterWorld members. Thanks Suzy and Penders

[edited by: Don_Hoagie at 9:12 pm (utc) on Jan. 5, 2007]

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved