HTML Layers - Browser Compatability?

[grannytgp]

Hello all,

I just started tinkering with HTML layers (DIV elements) after being a true table layout guy for many years. The flexability of using layers is awesome, but like I kind of figured.... there are browser compatability issues.

Here's a page I put together:
http://images.gibbonsdealerships.com/rentals/

This page renders perfectly in IE, but the layer placing is off a touch in FireFox. Thinking maybe it was good old FrontPage that caused the F-up, I then went on to edit the page in Dreamweaver, and place those layers where they looked perfect. And then the page looks perfect in FireFox, but not IE.

Is this just something to be expected because CSS-2 is still new, and browsers aren't rendering things the same? Or can any CSS gurus out there suggest anything to make sure the layers render the same on cross browser views?

Thanks in advance.

[Antonio]

I'm using K-Meleon and your page is totally fucked up, I don't know anything about CSS, but may be you should go back to using tables ;)

[Coyote]

Well, there are a few items to note...

(Just my $.02)

First, ditch dumbweaver n' frontpage. Don't trust apps that add in their own code in order to trick-boink it into workin'. You'll waste a lot of time debuggin' it.

Second, in your source, there is a mix of relative layout and fixed position method uses within the box model. A carry-over from excessive table layout use.

Lastly, try these references...

Zeldman

A List Apart

w3c tutorials

...and to help understand what those css attributes actually mean, try

Select Oracle

Hope this helps.

[grannytgp]

Well, there are a few items to note...

(Just my $.02)

First, ditch dumbweaver n' frontpage. Don't trust apps that add in their own code in order to trick-boink it into workin'. You'll waste a lot of time debuggin' it.

Second, in your source, there is a mix of relative layout and fixed position method uses within the box model. A carry-over from excessive table layout use.

Lastly, try these references...

Zeldman

A List Apart

w3c tutorials

...and to help understand what those css attributes actually mean, try

Select Oracle

Hope this helps.

Thanks for the advice Coyote... althought my use of FrontPage/DreamWeaver is just for ease of use. Learned html via notepad/textpad and good old trial and error, so really not dependent on a wysiwyg editor. I just prefer to use one to make life easier. But you do become lazy at times with leaving some crap code in place, that's for sure

As for the mix of code... I started out using a standard table layout on that page, and went on to overlay the layers. So it does have a table structure on the page, with layers placed on top. I just needed to bang something out quick, and didn't really care what it looked like in alternate browsers. But for my own peace of mind, was just looking for a bit of info on layer designs because they are quite powerful with how you can lay out a page.

[tgpmakers]

Yep got same prob myself fucking annoying not sure what to do about it yet but just thinking of some javascrip detecting type of browser to set layer height.

[Ace_luffy]

ie......

[pornguy]

Tru using NetObjects. That is the program that layers were made for.

[Peacemaker]

sorry, but that page looks horrible. tables (layers) are at the wrong places. some headers are half-hidden etc.
using:
firefox 1.0.2
1024x768

just wanted to let you know :]

[Kevsh]

I used to build sites with layers but due to browser compatibility issues, had to build the page in DIV and LAYER tags - that is, surrounding page elements in both tags.

I would use the <NOLAYER></NOLAYER> tags to block out the DIV elements for Netscape browsers.

In the end, it worked like a charm (I put together one of the first true drop-down menu systems on any large-scale site for a national bank) but the code was long and SEOs would cringe.

I'd say things have come a long way but just test like mad on different browsers, OSes as you'll see huge differences.

[grannytgp]

sorry, but that page looks horrible. tables (layers) are at the wrong places. some headers are half-hidden etc.
using:
firefox 1.0.2
1024x768

just wanted to let you know :]

I know it looks crappy in FireFox... but in IE it looks perfect. It was just something I threw together quick, without much concern about browser compatabilities. But it then got me to thinking more about layers, because once you start fooling around with them you can really see the benefit.

I'll have to spend some time to figure them out properly, because now I'm hooked. It's like photoshop for HTML, similar to being able to move a layer anywhere on the page you want, and/or resize it on the fly.

And I will give NetObjects a shot... thanks for the tip pornguy

[chronic avenger]

nice thread...

[BeatingSkull]

i would start with a netscape resize fix.. i would also change you text & use a css to format the text so the surfer can not change the text size..when i change the text size to a lager one, your page gets a bit out of alignment.
i dont lnow how it happened using dreamweaver as i use dreamweaver & my layers came out fine on all browsers, although in firefox my own site seems to have problems with firefox not showing the javascriot elements & certain elements of the css & i havent found a firefox fix for it, but no big deal as my site isnt dependant on it for the two or 3 particular parts that differ


http://www.beatingskull.com

[grannytgp]

i would start with a netscape resize fix.. i would also change you text & use a css to format the text so the surfer can not change the text size..when i change the text size to a lager one, your page gets a bit out of alignment.
i dont lnow how it happened using dreamweaver as i use dreamweaver & my layers came out fine on all browsers, although in firefox my own site seems to have problems with firefox not showing the javascriot elements & certain elements of the css & i havent found a firefox fix for it, but no big deal as my site isnt dependant on it for the two or 3 particular parts that differ


http://www.beatingskull.com

Thanks for the reply BeatingSkull. Actually, I did use CSS formatting for the text, but I used paragraph tags to set the styles, such as

<p class="StyleName">

instead of

<span class="StyleName">

Again, in IE the pages renders fine... and even in FireFox the text renders fine, with the exception of the bullet points up top.

Don't get me wrong, I love FireFox, but man it was easier before these browser wars started back up again!

[J.P.]

This is a case of different box models being used in different browsers. Try specifying a doctype, it may cure a lot of problems. I personally use XHTML Strict, both IE and FF use the same box model for this doctype.

Read more about box models here:
http://www.w3.org/TR/REC-CSS2/box.html

Julio