Forum Moderators: not2easy
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?
background: #101111 url(body_strip.gif) center top repeat-y;
Although, admittedly, that is *supposed* to be the same.
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]
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]
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!
...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.
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...
But on the bright side, my shower isn't clogged anymore.
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]
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]
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
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]
