Welcome to WebmasterWorld Guest from 107.20.59.213

Forum Moderators: not2easy

Message Too Old, No Replies

CSS positioning in Opera

     

BoneHeadicus

2:42 pm on Apr 11, 2001 (gmt 0)

10+ Year Member



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

6:30 pm on Apr 11, 2001 (gmt 0)

10+ Year Member



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

6:33 pm on Apr 11, 2001 (gmt 0)

10+ Year Member



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

6:53 pm on Apr 11, 2001 (gmt 0)

WebmasterWorld Senior Member tedster is a WebmasterWorld Top Contributor of All Time 10+ Year Member



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

David

6:54 pm on Apr 11, 2001 (gmt 0)

10+ Year Member



<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

7:59 pm on Apr 11, 2001 (gmt 0)

10+ Year Member



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

8:11 pm on Apr 11, 2001 (gmt 0)

10+ Year Member



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

8:22 pm on Apr 11, 2001 (gmt 0)

10+ Year Member



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

David

12:25 am on Apr 12, 2001 (gmt 0)

10+ Year Member



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

3:32 am on Apr 12, 2001 (gmt 0)

10+ Year Member



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

Just need some class I guess.

tedster

4:21 am on Apr 12, 2001 (gmt 0)

WebmasterWorld Senior Member tedster is a WebmasterWorld Top Contributor of All Time 10+ Year Member



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

4:28 am on Apr 12, 2001 (gmt 0)

10+ Year Member



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

4:37 am on Apr 12, 2001 (gmt 0)

10+ Year Member



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

6:07 am on Apr 12, 2001 (gmt 0)

WebmasterWorld Senior Member tedster is a WebmasterWorld Top Contributor of All Time 10+ Year Member



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

9:50 am on Apr 12, 2001 (gmt 0)

WebmasterWorld Administrator brett_tabke is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month



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

1:09 pm on Apr 12, 2001 (gmt 0)

10+ Year Member



>>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

 

Featured Threads

Hot Threads This Week

Hot Threads This Month