Design broken in IE7 and IE6

Website: http://www.fieldcrestofnc.org
CSS: http://www.fieldcrestofnc.org/templates/fieldcrest/css/style.css

Site is running on Joomla CMS.

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.

Ok, there is an old version of the site before I integrated Joomla here:
http://www.fieldcrestofnc.org/v1/

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.

Still trying to figure it out.

I got the top fixed in IE7, and i’m not hugely worried about making it IE6 compatible. I had the floats in the anchor instead of the list item.

Now I just need to get the content panels working right and I’m set.

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.

Any ideas? This is the last piece of the puzzle.

Hi,
It looks like you got the staircase bug going with your nav.
Try floating the anchors also.

It looks like you may need to trip haslayout on your #MainBody too.

#Content {
    background-color: #FFFFFF;
    width: 710px; /* Minus Padding */
    float:left;
    padding: 10px 10px 15px 10px;
    min-height:auto;
    }
    
[B][COLOR=Black]#MainBody[/COLOR][/B] {
    [COLOR=Blue]min-height:0;/*IE7 haslayout*/[/COLOR]
    background-color:#FFFFFF;
    }
[B]* html #MainBody [/B][COLOR=Blue]{height:1&#37;;}[/COLOR]/[COLOR=Blue]*IE6 haslayout*/[/COLOR]
[B]
#TopNav li[/B] {
    float:right;
    }

[B]#TopNav li a[/B] {
[COLOR=Blue]    float:right;
    height:25px;[/COLOR]
    }

Thanks!

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. :smiley:

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.

Thanks for the help!

Still trying to fully understand haslayout. It makes me a sad panda. Does that property even apply to other browsers or IE8?

If your happy with it now then that’s good.

I did not see that you set haslayout on the #MainBody , that is what causes IE to contain it’s floats and extend the BG color.

I still see this on your css

#MainBody {
    background-color:#FFFFFF;
    }

All in all you are just having haslayout problems, they can be tricky and strange behavior is always a good indicator of it. :wink:

You can learn more about haslayout here.

And yes, I have heard rumors about haslayout in IE8 though I have never had any problems with it myself.

Thanks for the help!