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/
