Home › Forums › CSS › Site works in every browser except IE 7 and before… › Re: Site works in every browser except IE 7 and before…
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
*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:
* 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…