The site looks great in IE8, Firefox, Safari, Chrome, but falls apart in IE7 and IE6. IE8 Compatibility mode breaks it as well. Anyone have any idea why? I’ve tried re-coding it from scratch but I get the same issues, so it’s something I’m doing wrong and don’t know I’m doing it. I’m thinking it may be a box model thing. Any tips would be greatly appreciated.
This version works fine. The new one was based off the old, and the only real difference was the navigation CSS. It must be something with the <ul> <li> <span> or <a> tag CSS.
The new version breaks the navigation on older browsers by taking the one-line top navigation, and placing it on multiple lines despite being set to float.
okay this is weird. All the other pages look fine now, except the home page (Hospitatilty Section). All the pages are dynamically generated from the same template though. The only difference I can think of, is that the home page (Hospitality section) uses a separator span in the left navigation menu.
You can see what I’m talking about by toggling compatibility mode in IE8, while on the hospitality section. It does not do this in any other section.
Also, I have no idea why, but IE7 was freaking out because I had a height assigned to my separator span. I removed it and just added a top and bottom margin and it fixed all the other layout issues. How goofy is that?
I see, the heights on the span were giving haslayout to IE7 and because they were block levels they were dropping down. You were dealing with IE’s broken float model and haslayout at the same time.
You could have probably fixed it by floating the spans also.
I made the changes you suggested however it broke the nav for IE7 and made my background not fill the #MainBody resulting in white space under the left navigation.
All in all, it now looks mostly the same in IE7/IE8 and it’s usable in IE6, so I’m happy.