Stylesheets per browser

[jcaudill]

A designer has given me a template, that has a conditional that loads a stylesheet for all browsers besides IE7, and then one for IE7. Is there any way to implement something like this within CMS MS? I need to at least get something into CMS MS so Tiny MCE can parse the styles.

Thanks,
JP

[TJINAK]

Try this:

1. Create a a new page template.
2. Drop the smarty tag {stylesheets} from your new template.
3. Include your scripting that calls the appropriate stylesheet to your custome template, wrap it in the {literal} tags.  You may also look into creating a custom tag if its php thats calling the stylesheets. (Find it under the extensions menu, user defined tags) for more info see http://wiki.cmsmadesimple.org/index.php ... fined_Tags

TJ

[jcaudill]

Ya I've done that and it works fine, however, if the stylesheet is not loaded into CMS MS, then the different style classes aren't available to Tiny MCE. Should I load the stylesheet in, link it to the template but just not use the {stylesheet} tag?

JP

[kermit]

it sounds like your designer styled the entire layout twice; once for "other browsers" and again for ie7 only... which can mean double-the-work if you want to make even a simple change like a text color...

but the more common (and usually much easier) way is to have ONE stylesheet for ALL browsers, and if necessary, use an ie-specific conditional to load CHANGES ONLY for a particular version of ie. usually there aren't many "fixes" needed for ie; and if that's the case, you may even be able to use just *one* stylesheet for everybody and target a specific version of ie with css filters (exploting quirks, which aren't always 'bugs', in the way browsers parse stylesheets), and there are a couple methods for doing just that with ie7.

[ericob]

Ya I've done that and it works fine, however, if the stylesheet is not loaded into CMS MS, then the different style classes aren't available to Tiny MCE. Should I load the stylesheet in, link it to the template but just not use the {stylesheet} tag?

JP

I'm just a relative beginner with these Internet Explorer conditional comments, but it seems the usual way to implement this is that you have identical class names, but they are defined differently in the "For IE" stylesheet than in the "For all other browsers" stylesheet.

This way, the markup in the pages you deliver doesn't need to change.  For example, you do not have styles named "Sidbar_IE" and "Sidebar," you have only one "Sidebar."

A conditional comment on every page will cause IE to use the stylesheet designed for it.

[Dr.CSS]

Most times you will only need conditional CSS calls for IE6 or 7 for the same thing as Firefox as in you may need to have less margin in the IE6 call because it has a problem with the box model not because you want something to show up blue in IE and green in all other browsers so it won't be an IE CSS call that will be used in the style drop down in the editor...

For IE6 you can use the star hack... * html #nameofdiv {your IE style} just below the normal call, or google for IE6 & 7 hacks