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

12-30-2009, 10:43 PM

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

12-31-2009, 08: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/).

01-02-2010, 06: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.