Re: Site works in every browser except IE 7 and before…

[aspiringWebbie]

Ok – I am still new to this (can you tell by my SN :roll: ) – but I am trying to help you the best best way that I can,

Looking at your site in IE 6 – the content is scattered all over the page. I do notice that you have some Floated elements that also include a margin in the same direction. In IE 6 – remember this causes what is known as the "Double Margin Bug" so what may be expecting to be 10px margin is now 20px margin. I also notice that you have elements that are both floated and relative positioned, I may be wrong, but this may not be necessary (?) Also – in IE 6 – transparent png’s are ignored – so your transparent urls, show a white background in IE 6

In IE 7 – everything is fine except the main content is shifted down and partially underneath your background

Possible fixes:

*Remove the margins on the floated elements so it eliminates the Double Margin Bug. (If an element is floated left – remove the left margin). If necessary – try adding display:inline and this should help.

*In IE 6 & 7 – the bottom margin is ignored. I may have overlooked it – but remove any bottom margins on child elements – and apply bottom padding to their parent containers.

* You may want to include overflow: hidden to your parent containers. If a parent container has multiple floats – it can affect your layout. To be safe add the overflow: hidden

*for the transparent png issue – one of the best and easiest fixes can be found here:
http://www.dillerdesign.com/experiment/DD_belatedPNG/

* To be able to test your sites in multiple IE browsers – google IE Tester

I hope some of these thoughts put you in the right direction…