4 replies [Last post]
iBert
iBert's picture
Offline
newbie
Last seen: 6 years 16 weeks ago
Timezone: GMT+2
Joined: 2004-01-11
Posts: 5
Points: 0

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

dbowne
Offline
Enthusiast
Washinton DC
Last seen: 16 years 29 weeks ago
Washinton DC
Joined: 2003-05-22
Posts: 53
Points: 0

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.

dbowne

iBert
iBert's picture
Offline
newbie
Last seen: 6 years 16 weeks ago
Timezone: GMT+2
Joined: 2004-01-11
Posts: 5
Points: 0

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

dbowne
Offline
Enthusiast
Washinton DC
Last seen: 16 years 29 weeks ago
Washinton DC
Joined: 2003-05-22
Posts: 53
Points: 0

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.

dbowne

iBert
iBert's picture
Offline
newbie
Last seen: 6 years 16 weeks ago
Timezone: GMT+2
Joined: 2004-01-11
Posts: 5
Points: 0

Nesting layers

Maybe I made a fault and didn't uploaded everything, sorry for that dbowne. Here you can find a very working link Smile : 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 Laughing out loud

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 Evil) 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!