Forum Moderators: not2easy

Message Too Old, No Replies

Problems with layers

         

BBB_Guy

9:03 pm on Jul 3, 2003 (gmt 0)

10+ Year Member



Recently i looked my website with Opera. There was a problem with layers. I use absolute positioning. Could it be the reason?

Reflection

9:05 pm on Jul 3, 2003 (gmt 0)

10+ Year Member



Your gonna have to give more details than that.

drbrain

9:06 pm on Jul 3, 2003 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Like a short, simple example of HTML and CSS that illustrates the problem.

BBB_Guy

8:58 am on Jul 4, 2003 (gmt 0)

10+ Year Member



Ok, here it goes

Css code

#up {
position: absolute;
padding: 5px;
top: 2px;
left: 0px;
width: 760px;
background-color : #485D88;
}
#left {
position: absolute;
padding: 5px;
top: 28px;
left: 0px;
width: 140px;
background-color: #FFFFFF;
height: 1050px;
}
#main {
position: absolute;
padding: 5px;
top: 28px;
left: 145px;
width: 480px;
height: 1050px;
background-color : #FFFFFF;
}
#right {
position: absolute;
top: 28px;
left: 630px;
width: 130px;
height: 1050px;
background-color: #FFFFFF;
}

Layer up is too long, when viewing with Opera.
There are no spaces between layers left, main and right, they overlap.

bekyed

9:08 am on Jul 6, 2003 (gmt 0)

10+ Year Member



Did you do this in dreamweaver?

DrDoc

5:00 pm on Jul 6, 2003 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Welcome to Webmaster World! :)

I hate to tell you this, but Opera is right in the way it renders the page.

Layer up is too long, when viewing with Opera.
There are no spaces between layers left, main and right, they overlap.

This "problem" is not a problem in Opera, it's a problem with IE5.5 (or IE6 in quirks mode). I assume you're either using IE5.5, or that you haven't specified a full doctype declaration, or that you have the XML prologue present. Either way, this is how it should be:
[webmasterworld.com...] (message 37 & 38)

Padding, borders, and margins are applied outside the box. New W3C CSS recommendations will let us choose whether we want padding applied as an addition to the box width, or on the inside.

Layer up is too long

It should be 770px...

There are no spaces between layers left, main and right

#left is 150px wide, #main starts at 145px.
#main is 490px wide (490+145=635px), #right starts at 630px.