...

View Full Version : Overlapping, floated layers effect does not work in IE6+7



WebDesignHero
12-30-2009, 09:43 PM
Hello,

First post so please let me know if I should do things differently. I am working on the layout for my site and it uses some overlapping layers to give me the effect I want without using some kind of background image hack or fake out. The effect seems to work in my latest version of Opera, FF, and Chrome. However, it is not working in IE6. I have kept IE6 on my machine because usually if it works there it will work in IE7+ as well. I used a screen shot site and the site seems to work in IE8 - but it chokes out in IE6 and IE7.

If someone could take a look and give me some suggestions to get this layout (don't care about the alpha transparency right now) to work better in IE7 and IE6 if possible.

I had tried this using AP layers, but then the backgrounds don't stretch properly. Open to all suggestions, even If i need to resort to hacks of some sort at long as its cross browser:

The site is at: http://s89341424.onlinehome.us/testing/bn2/

and the make css file is design.css

abduraooft
12-31-2009, 07:42 AM
IE can't overlap floated elements. To do this you'd need o use some negative margins or better to use absolute positions.

PS: Cure the divitis (http://csscreator.com/divitis) and avoid using tables for your layout (http://www.hotdesign.com/seybold/).

WebDesignHero
01-02-2010, 05:37 AM
Thanks for the input.

Can't use absolute heights without JavaScript fix..

My layout is all divs - the tables are from the default Joomla internal templates.

It looks like I will have to fake the effect for cross browser accesibility.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum