None of those IE filters really work properly and I would avoid using any of them. They aren’t normal css and act on elements as a whole and change their behaviour dramatically. Adding gradient filters in ie9 will kill the round corners and cause loads of other problems. Adding filters (like the opacity filter) shouldn’t be used on positioned elements as it will kill the links.
Unless you understand all the bugs and associated work-around with filters then they should be avoided at all costs. They also dramatically slow the page down in IE and can make it barely work. It’s ok to use one filter for the odd occasion but you are blasting the page with multiple filters and multiple scripts and instead of html5 you have a page resembling the broken mark-up of the last century.
• Are you sure about the selectors in #header_main,section {margin-top:0;margin-bottom:0;} ? I gave an Id to most elements, maybe you meant #header_main, #section_header_main
The code I gave is correct and will fix IE.
• Your fix repositioned vertically the menu in IE 7 8 but not 9 (although it moved a bit)
IE9 didn’t need moving. You must be looking at in compatibility view or quirks mode or something.
• Logo is mispositioned and clipped in IE9 only, dunno why.
It’s fine in IE9 Windows 7.
• I’m puzzled that it doesn’t display better overall in IE 9, it was near perfect in a much earlier version. is border-radius supported for example ?
It’s fine in IE9. As I said above you have probably locally tripped the compatibility view and then none of the new features will work.
• I now see what you meant by unreachable, I changed again and gave a height to the sidebar and a bottom to the main content so that everything is visible within 600px
The solution you had before was much better in my opinion with no height and bottom:55px;
• Have you got any fix for preformating ? to avoid having to add <br> or <p> everywhere my idea was to preformat the content. I used white-space:pre-line and <pre> in case CSS was not used. But it seems impossible in IE to get both line breaks and line wraps, it’s either one or the other.
pre should only be used for pre-formatted content like code. Never use it in place of semantic html paragraph elements. Don’t use breaks either to make space either as they are not meant for spacing as such bit as line-breaks between things like addresses, poems or form elements. The rest of the time you should use the p element for paragraphs.
• I could have combined rules, other than that I don’t see how I could have done the same with less code. Degrading means coding in a way that it’s ok if it breaks in some browsers, like border-radius, right ? I’m against using images for style. I think it goes against degrading. I suppose you meant images for the rotated tabs, but that would have meant images for all tabs, and also text in images (which is bad).
The reason why I rotated them was because 1) they are tabs and thus need to be attached to the content 2) there were too many to fit above the content. The other possibility was to put them at the bottom of the content. Or maybe you have design tips.
Degrading doesn’t mean it should break in other browsers but rather they should get a simpler but still usable display. I owuld be ok with you rotating the tabs with filters (as with the code I have already given) but I would draw the line at all the other filters you are using for IE as they cause differences and problems in each that unless you are an expert you will be unlikely to solve by yourself. As I said before it’s actually quicker for me to recode the page than to fix the existing one because of all these problems. They must all be sorted at the time (and one at a time) as you implement them during design and not afterwards.
If you have too menu items to fit at the top of your structure then you need to re-think your page structure as users don’t like too many options. It becomes too baffling.
