Welcome to WebmasterWorld Guest from 35.175.120.174

Forum Moderators: open

Message Too Old, No Replies

problem with layers in FireFox

issue with layers in FireFox

     
4:14 pm on Aug 23, 2005 (gmt 0)

New User

10+ Year Member

joined:Aug 23, 2005
posts:3
votes: 0


I've designed a website which looks great in IE, but in FireFox my "labels" (each label is a layer with tables in it, displaying an image and text) get messed up as their X coordinate increases. The labels on the far left side of the page look fine, but at some point in the middle of the page you can visualize drawing a vertical line, whereby the white backgrounds of the labels don't extend beyond that point. Plus, the far right layers don't show their white backgrounds at all. Then, if you take the right edge of the FireFox browser window and drag it to the left, then right, and repeat, the layer backgrounds slide accordingly.

The site is PHP and uses layers extensively.

I've played with it some, saving the resultant HTML file in the browser after being processed by PHP on the server, then changing some of the labels' X coordinates and indeed it seems that somewhere in the middle of the page FireFox doesn't want to honor the layer properties for some reason. But it's more than that...it's like there is a buffer area between where it "breaks" and the right side of the browser's edge.

All the labels are layers (divs) with the following settings (the pixel values of course differ between them):
style="position: absolute; left: 698px; top: 482px; height: 40px; z-index:2; border: 1px solid #000000; background-color: #FFFFFF; filter:alpha(Opacity=85)"

Yes, I know the alpha filter is IE-specific. I believe there is a corresponding FireFox filter named -moz-opacity, but I haven't worked that out yet.

Does anyone have any ideas on what's going on? I appreciate any help.

4:20 pm on Aug 23, 2005 (gmt 0)

Senior Member from US 

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

joined:Aug 26, 2004
posts:3178
votes: 22


Another victom of false (MS) standards...

You should ALWAYS test your site with a W3C compliant browser FIRST (GEcko or Opera) and THEN test with legacy browsers (Netscape 4, any IE).

Choose your favorite Gecko browser and test your work out and then once you have it working fine adapt IE with it's countless bugs. The people at MS KNOW the (lack of) quality of their products so at least they gave us IE-conditional comments.

As far as layers go it's all about z-index. The higher the number the closer the object is to you (the viewer) and the lower the number (negative values not allowed) the further away the object is.

4:56 pm on Aug 23, 2005 (gmt 0)

New User

10+ Year Member

joined:Aug 23, 2005
posts:3
votes: 0


Thanks much. I have set z-index, but my problem isn't with the z-index of the layers, it's with the fact that as the X coordinate increases (layer is horizontally further away from the left side), for whatever reason it's background starts to get ripped away. It's quite interesting actually. I'd be happy to share the URL with you, if you are willing to see it in action. Thanks.

[edited by: encyclo at 5:20 pm (utc) on Aug. 23, 2005]
[edit reason] No email addresses please [/edit]

5:17 pm on Aug 23, 2005 (gmt 0)

Senior Member from US 

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

joined:Aug 26, 2004
posts:3178
votes: 22


Ok I've sent you an email. My advice btw if you want to avoid spam to NEVER post your private email address clientside (on the web where serach engines can crawl). Though you wouldn't have to worry so much here as other places I suspect because this site is run smoother then the smoothest smoothy you could imagine.