homepage Welcome to WebmasterWorld Guest from 54.237.184.242
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
CSS positioning in Opera
BoneHeadicus




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

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




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

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




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

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




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

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

David




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

<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




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

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




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

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




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

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

David




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

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




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

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

Just need some class I guess.

tedster




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

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




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

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




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

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




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

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




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

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




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

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

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved