HTML Layers - Browser Compatability? - GoFuckYourself.com

grannytgp · 09-24-2005, 06:52 AM

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 · 09-24-2005, 08:13 AM

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 · 09-24-2005, 10:21 AM

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 · 09-24-2005, 11:00 AM

Quote:

Originally Posted by 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.

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 · 09-24-2005, 11:30 AM

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 · 09-24-2005, 11:31 AM

ie......

pornguy · 09-24-2005, 11:37 AM

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

Peacemaker · 09-24-2005, 11:40 AM

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 · 09-24-2005, 11:46 AM

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 · 09-24-2005, 12:00 PM

Quote:

Originally Posted by 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 :]

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 · 09-24-2005, 01:10 PM

nice thread...

BeatingSkull · 09-24-2005, 01:41 PM

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 · 09-24-2005, 02:05 PM

Quote:

Originally Posted by 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

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

Code:

<p class="StyleName">

instead of

Code:

<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. · 09-24-2005, 03:10 PM

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

09-24-2005, 06:52 AM	#1
grannytgp Confirmed User Join Date: Aug 2002 Posts: 269	HTML Layers - Browser Compatability? 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. __________________ No sig = good sig

09-24-2005, 11:30 AM	#5
tgpmakers Confirmed User Join Date: Feb 2004 Location: United Kingdom Posts: 575	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. __________________ http://www.tgpmakers.com/

09-24-2005, 11:31 AM	#6
Ace_luffy www.creationcrew.com Industry Role: Join Date: Feb 2005 Location: CREATIONCREW.COM CREATIONCREW.COM CREATIONCREW.COM CREATIONCREW.COM CREATIONCREW.COM CREATIONCREW.COM Posts: 12,111	ie...... __________________ ++ Adult and Mainstream Websites Designs \| 10 banners for only $50 \| html5 Banners ++ email : [email protected] Telegram : https://t.me/creationcrew \| HTML5/Responsive Site - Div/CSS - ElevatedX - NATs - Wordpress

09-24-2005, 11:37 AM	#7
pornguy Too lazy to set a custom title Industry Role: Join Date: Mar 2003 Location: Homeless Posts: 62,911	Tru using NetObjects. That is the program that layers were made for. __________________ PornGuy skype me pornguy_epic AmateurDough The Hottes Shemales online! TChicks.com \| Angeles Cid \| Mariana Cordoba \| MAILERS WELCOME!

09-24-2005, 11:40 AM	#8
Peacemaker Confirmed User Join Date: Feb 2002 Location: Mars Posts: 897	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 :] __________________ SEO since 2002 - Google Index Record: 32 minutes. - Selling SEO services and tools

09-24-2005, 08:13 AM	#2
Antonio Too lazy to set a custom title Join Date: Oct 2001 Location: Spartaaaaaaaaa Posts: 14,136	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 ;)

09-24-2005, 10:21 AM	#3
Coyote Drinker of Scotch Industry Role: Join Date: May 2003 Location: Texas Posts: 242	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.

09-24-2005, 11:46 AM	#9
Kevsh Confirmed User Join Date: Dec 2004 Location: TO Posts: 8,619	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.

09-24-2005, 01:10 PM	#11
chronic avenger Confirmed User Join Date: Aug 2003 Location: C.A. All Day Posts: 2,509	nice thread... __________________ \| Sexxy Toons \| Blog Designs \| Icq 333676510

09-24-2005, 01:41 PM	#12
BeatingSkull Confirmed User Join Date: Sep 2005 Location: The Confederate States of America Posts: 713	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 __________________ "Every Tuesday, Thursday and Sunday in October PussyCash will pay you a $100 FOR EVERY IMLIVE SIGN-UP you refer"

09-24-2005, 03:10 PM	#14
J.P. Confirmed User Join Date: Jun 2004 Posts: 689	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 __________________ Webmasters! Looking for new affiliate programs to promote? Affiliate Program Search <-- Search for programs with FHGs, RSS feed, specific niche sponsors, ...