Positioning Issue in IE6 & 7 Need Help Fixing

HTML & CSS
1

Good morning,

I have just launched a new site: https://www.mfs.org/

On the homepage we have a JQuery Slider component that is built using some positioned Div’s to create an overlay effect. It works perfectly in all browsers except for IE6 and IE7. I am not terribly concerned about IE6 but I need this to work in at least IE7. Anyone have any ideas on what kind of conditional CSS I can add to my IE stylesheet to get this to render properly?

Any and all help is greatly appreciated.

Thanks,

2

I would say you first need to clean up the code. Why do you float the DemographicLinksColumn and then position to absolute, more…who is the relative container of the DemographicLinksColumn to which is absolutely positioned? The position of the DemographicLinksColumn is not even specified (top/left/right/bottom) how it should be positioned.

You have extra usage of the float element…you are even floating the entire container when it is not needed at all to be floated.

Said this, you don’t need any conditional rules at all, you just need to clean up your code and it will work.

I can’t right now as I am busy, but later on (if no one writes it before me) I will make a mockup for your layout and paste the code here.

Cheers.

3

Ok, I took your advice and I went in and cleaned things up a bit and it did the trick to get everything to show properly in IE6 & 7 but now I have list spacing issues with the navigation and PNG transparency issues with the main element in IE6 any good tweaks to make these work properly? I am not so worried about the PNG transparency issue so much as i am about the navigation spacing.

Thanks

4

The vertical nav can be aligned better by setting the list element to display inline and curing the whitespace bug there.


#DemographicLinksColumn ul li {
display:inline
}

The dropdowns don’t seem to be working in IE6 so I assume you have some javascript for them somewhere?