Mon, 2004-01-12 22:06
Is it possible to create a container layer (60 px from the top, 100% wide, 326 px high, tiling background (10 px x 326 px), and put three layers inside this container layer next to each other? The first 400 px wide, the second 300 px, the third 180 px.
I'm talking about a CSS redesign for this website: http://www.dinhamiek.be/. The container layer should have the purple with shadow background and stretches horizontally. The first layer for the big picture, the second for the main content, the third for the side content.
I tried for days, but it keeps giving problems in IE 6/Windows and Netscape 7/Windows, especially when you shrink the window, and than let it fill the entire screen again...
Can someone help me please? I'm pretty desperate... Thx
Wed, 2004-01-14 19:06
#1
post your code
iBert,
It is definitely possible, but as you have run into pixel perfect cross browser positioning is a headache. Post a link to your work and I will be happy to troubleshoot it for you.
Thu, 2004-01-15 09:09
#2
Nesting layers
Thx for offering your help so far. Here is a link to the the testfile: http://users.skynet.be/bert_fonteyn/dinhamiek/index.html. The page validates as valid XHTML.
Now here is the bug in Windows (I have not tested it in Mac yet), both in Netscape 7 as in IE 6. Shrink your window, so you have a horizontal scrollbar. Scroll to the right, and you will notice there is a white area which can 't show the backgroundtile for some 60 px wide. The content (which is white) is there however...
Can you please tell me what I'm doing wrong?
Greetz, Bert
Thu, 2004-01-15 15:51
#3
expected behaviour
iBert,
When I hit the link you sent in WIN IE 6.0 I cannot duplicate the described behavior. I do not see a background tile at all.
However, the description you gave gives me an idea of what you were/are seeing. Sounds like a relative width element (div) is not expanding to fill the space outside of the initial visual space of the browser. If that is the case, the unfortunately what you have described is the expected behaviour. elements with a relative width (not a fixed size such as 800px) are rendered by the browser as a percentage of the visual space on page load. They are not re-rendered when you scroll, and thus will not expand to fill those areas which were previously off screen.
You can find out more about this here:
http://www.w3.org/TR/REC-CSS2/visudet.html#the-width-property
If you need to avoid this type of behavior, I suggest that you work with a fixed width layout, which it looks like you are doing in the example you linked to. Hope this helps somewhat.
Thu, 2004-01-15 17:26
#4
Nesting layers
Maybe I made a fault and didn't uploaded everything, sorry for that dbowne. Here you can find a very working link 
: http://www.dinhamiek.be/test/index.html That is the first (test)page from the completely modified transition to XHTML/CSS code. I just love web standards 
But that isn't necessary, because you completely understood what I meant. This kind of behaviour is present in every browser on my computer: IE, Netscape, Opera (which f*cks up more than that, damn you Opera 
) and Firebird.
I'll keep looking for a kind of workaround, because in transitional HTML it's possible. That's also the only thing on my page I have to fix. If I find it, I'll let you know. Thank you so much for aiding my in this issue!