rose red wrote: > I tried them every possible ( or did I forgot one ? ) way around the > last 10 days: [...] doesn't work ;-(
It does when done right. However, looking at your stylesheets it becomes clear that you are trying to serve IE6 "complete styles" instead of just "corrections", so you are making it extremely complicated for yourself and the chances of getting it wrong somewhere in those stylesheets is extremely high. More about that further down, after the "specificity" part. >> 2: you may have to give styles in the IE6 stylesheet even higher >> specificity, to make sure override takes effect. > > what do you precisely mean ? Do you have an example? First: understand "selector specificity". In CSS standards "dry but accurate" language... <http://www.w3.org/TR/CSS21/cascade.html#specificity> ...and in a more popularized form... <http://css-tricks.com/specifics-on-css-specificity/> To exemplify by using an arbitrary style declaration from your page. The order of your stylesheet links is here as in your original, with IE6 styles linked in first. In 'lte-ie6.css' you have... #footer { position: relative; /* more styles */ } ...while in 'sc-ie7.css' you have... #footer { position : fixed; /* more styles */ } Same selector (= same specificity) in both stylesheets, means the last style declaration wins. IE6 doesn't understand 'position : fixed;' so it will fail. If I now change specificity for #footer in the 'lte-ie6.css' stylesheet, so it becomes... html body #footer { position: relative; /* more styles */ } In 'sc-ie7.css' you still have... #footer { position : fixed; /* more styles */ } The "html body #footer" selector in the first stylesheet points at the same element as the one in the second stylesheet, but now with higher selector specificity thanks to the "html body" addition from the element-chain your markup has. So now the first style declaration wins over the second, and IE6 will therefore see 'position: relative;' for #footer. ----------- IE6 needs "corrections", *not* a complete stylesheet in addition to the regular one, so you should therefore start with stylesheet links in the right order, and a completely empty stylesheet for IE6. IE6 will pick up all styles from the regular 'sc-ie7.css' stylesheet, and only when IE6 gets it wrong do you add a style declaration in the IE6 stylesheet - to "correct IE6" on that point. First let me clean up your #footer styles so they make more sense... In the 'sc-ie7.css' you'll then have... #footer { position : fixed; bottom : 0; left : 0; width : 100%; height : 100px; background-image : url(images/footer_grass.png); background-repeat : repeat-x; z-index : 9; } IE6 doesn't understand 'position: fixed', so in the 'lte-ie6.css' stylesheet I write... #footer { position: relative; } ...and nothing more for #footer. As long as the 'lte-ie6.css' stylesheet is linked in after the regular 'sc-ie7.css' stylesheet, IE6 will see all the other #footer styles, but 'position: fixed' will be overridden so IE6 only sees 'position: relative'. This correction won't make IE6 handle the #footer the same way as the other browsers do - IE6 doesn't understand 'position fixed' ... period. The correction will only allow the #footer to be rendered where it is in the markup in IE6, instead of IE6 trying to do "fancy things" with it. The same with all other style declarations. First make it work flawless in all browsers but IE6, and then correct what IE6 doesn't handle correctly by serving IE6 _only_ the corrections it needs in order to behave. Remember: what IE6 can't do, it can't do no matter what. Thus, all you can do it to make the most out of what IE6 _can_ do, and avoid its worst weaknesses in the process. Serving IE6 only "corrections" will cut the size of your 'lte-ie6.css' stylesheet down to almost nothing, and give IE6 a chance to do what it can with what it understands, without disturbing better browsers. regards Georg -- http://www.gunlaug.no ______________________________________________________________________ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
