CSS positioning in Opera

[BoneHeadicus]

I have used the following css to position a layer on a site.

<div id="Layer1">

#layer1{
position:absolute;
top:-360px;
left:70px;
width:640px;
height:350px;
display:none

Opera refuses to cooperate although Netscape is ok with it. In Opera it just puts the text visible at the top of the site and then the actual site comes next farther down the page. It looks pretty stupid.

Anyone see a problem that might cause Opera not to recognize the layer position?

[David]

I am not sure what it is doing, but I would try..

<style>
#layer1{
position:absolute;
top:-360px;
left:70px;
width:640px;
height:350px;
display:none}
</style>

Then in the Body
<div id="Layer1">Your content</div>

Edited by: David

[scott]

The only 2 things I see that stand out are the inconsistency with the caps (Layer1 and layer1). The other thing you might try is not naming the specific unit (px) and let it default to pixels.

I let it default and things work okay, but then, I've not tried displaying off screen yet.

A couple of outside shots at it is all I can contribute, sorry.

-Scott

[tedster]

Minor observation -- remember the closing curly brace. Maybe it's in the code but just not pasted into the post.

[David]

<div id="layer1"
style="position:absolute;
top:-360px;left:70;width:640px;height:350px,display:none">
</div>

O.k. This works in Opera 5.1

are you dynamicaly moving the content on to the screen?

[BoneHeadicus]

OK David. You got it. That makes it work.

I'm sorry I took for granted that it was an external sheet, which BTW does not work even though it's the exact same thing......hmmmm.

Now since this works this way on the page...will I get penalized for on page css negatively positioned?

Incidentally even WebTV works with the external sheets except you gotta add about 500 px to account for the increased font size spilling over to visibility.

[David]

Can't you use my first post with an external css file. I don't know I have never tried it but it should work.

[BoneHeadicus]

It just doesn't seem to work....I don't understand it.

[David]

BH- If you get a chance try this.
in the external .css

div.layer1 {position:absolute;top:-360px;left:70px;width:640px;height:350px;display:none}

in body

<div class="layer1">content</div>

I havent checked it with netscape but IE and Opera seem to like it. It needs to be a CLASS instead of ID

[BoneHeadicus]

Cool. It works in O 5.1, nn 4.76, ie 5 and web tv.

Just need some class I guess.

[tedster]

I've been following this discussion, but I couldn't help out because I'm not currently running Opera.

I'm curious -- can you say the problem is definitely narrowed down to the difference between CLASS and ID? If so, was there an ID conflict in the code (i.e. was the ID applied more than once)?

This seems like an important incompatibility/oddity to pin down exactly.

[BoneHeadicus]

Definitely the class made it work. No conflicts with another ID cuz there weren't any others.

I started out trying to do it with a class and it didn't work then. Mousemoves came up with the ID thing and it always worked until I got on my compatibility kick today.
Now it works in everything I've tried.

BTW the neg layer trick works well with se's....in top 3 on keys. Combine this with the 200 <br> before the code starts and people think you have a mysterious disappearing code. ;)

I used this instead of cloaking because it unfortunately is sitting on an <gasp> NT server.

[David]

Actually I could not get the external css sheet to work on any browser with ID, On Page it was no problem. I read somewhere (I think) that "ID" is depricated (hate it when that happens) where as Class is more CSS. I have not used external sheets before, so as I was testing it I included some text with font and color styles. Using the Id for positioning all browsers ignored it but did rendor the text styles. Switched to Class and it worked great (go figure).
Tedster, any thoughts you have as to why this is, would be great.

[tedster]

David, I've never heard anything at all about ID being deprecated. Just did a search and couldn't turn up a hint of this, and it would be very important news.

I'm definitely going to continue digging into this. It's an odd one.

[Brett_Tabke]

I asked Rijk van Geijtenbeek at Opera software about it:
--- import
I see there were some replies and the problem was solved by using another way to reach the goal. But it should also work the way it was tried first; i think there was simply a syntax error. This example works fine in Opera 5.10:

This test page seems to work fine in Opera 5.10;
[opera.com...]
---

While you are opera.com, check out Rijk's Opera 5.10 page of tips:
[opera.com...] and his home page at: [rijk.op.het.net...]

Brett

[David]

>>i think there was simply a syntax error>>

There must have been,because this example certainly works. Wish I would have saved the test file, Its going to bug me now because there isnt hardly any difference between the two.

Thanks Brett. Good resource