I think I am done now. Took me whole day though. The tricks I used: 1) Pyramid top worked from the beginning in all browsers but IE 6, so I simply overridden alternate positioning for IE 6 (in which I used relative instead of absolute) with "general" positioning which as I've said works in all other browsers as far as I know. Made use of the fact that IE 6 can't see children selector ( > ):
#pyr_top { position: relative; left: 623px; bottom: 647px; background-image: url( images/top_sponge_c32.png ); width: 116px; height: 47px; } html>body #pyr_top { position: absolute; right: 10px; top: -47px; } 2) Solved IE 7 background centering problem by wrapping everything inside <body> within a 'wrapper' <div>. It looks like IE 7 <body> width can't be smaller than the background's image's width. In my case it was a 2000px wide texture, so technically it was centered; the problem was it wasn't trimmed to the browser's actual viewable area. Hence the horizontal scroll bar even though the ain't any content to the right. Even overflow-x:hidden didn't fix that. Passed some IE 7 specific commands using the comment provided below. /* <!--[if IE 7]><link rel="stylesheet" type="text/css" media="screen" href="ie7fixes.css" /><![endif]--> */ <-------- goes into head of html file body { margin: 0; padding: 0; width: 100%; height: 120%; background-image: none; background-position: 0% 0%; background-repeat: no-repeat; overflow-x: hidden; } #wrapper { width: 100%; height: 120%; background-image: url( images/background_texture.png ); background-position: center top; background-repeat: repeat-y; } Ok so the site isn't _exactly_ the same, but probably in the region of 99% being the same. The feel was retained, so I am happy :) My first site now works as intended. Thanks for the help everyone! 2008/10/20 David Laakso <[EMAIL PROTECTED]> > Gintautas Simkus wrote: > >> >> >> It looks like IE-6 doesn't go well with absolute positions. Though >> position: >> relative didn't work for me, either one of IE's or FF wouldn't render >> properly. Now I want to shout out a few strong words, but whatever. Anyway >> this got me thinking, what can you accomplish with absolute positioning >> that >> you can't with relative? >> >> The above code fixes the "top" of the pyramid, but still the BG in IE-7 is >> buggy. So David could you take a look at the updated version and suggest >> something for the IE-7 background glitch? overflow-y ain't working. >> Background is centered in both IE6 and IE8, not to mention all other >> browsers, this must be very IE7-specific. >> >> >> > > > RE: <http://www.archsite.net/> > > > The background image seems to be centered on this end in all browsers. > The simplest means to position the pyramid image, considering the > alternatives with your current positioning scheme, is to move #pyr_top in > the markup to be the first id to open and the first id to close. > > Please see (quick checked in IE/6.0, IE/7.0, and some compliant Mac > browsers: > <http://www.chelseacreekstudio.com/ca/cssd/tech.htm> > css > <http://www.chelseacreekstudio.com/ca/cssd/tech_files/style000.css> > > There is nothing "wrong" with any of the positioning methods [1] currently > available-- including the use of position relative and absolute. In general, > until something better comes along in the future, float constructed layouts > where content determines height tend to be far less restrictive, and less > problematic than those structured nearly entirely (such as yours) with > absolute positioning. > > [1] <http://www.w3.org/TR/CSS21/visuren.html#positioning-scheme> > > > > > -- > > A thin red line and a salmon-color ampersand forthcoming. > > http://chelseacreekstudio.com/ > ______________________________________________________________________ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/