Skip to main content

This site requires you to update your browser. Your browsing experience maybe affected by not having the most up to date version.

General Questions /

General questions about getting started with SilverStripe that don't fit in any of the categories above.

Moderators: martimiz, Sean, Ed, biapar, Willr, Ingo, swaiba

Order of css stylesheets


Go to End
Reply


2 Posts   1742 Views

Avatar
mschiefmaker

Community Member, 187 Posts

9 December 2009 at 8:56am

Not sure if this is a stupid question but ...

All my sites default to the stylesheets being attached in this order

<!--[if IE 6]>
<style type="text/css">
@import url(themes/blah/css/ie6.css);
</style>
<![endif]-->

<!--[if IE 7]>
<style type="text/css">
@import url(themes/blah/css/ie7.css);
</style>
<![endif]-->
<link rel="stylesheet" type="text/css" href="http://www.anzata.org/themes/blah/css/layout.css?m=1260297200" />
<link rel="stylesheet" type="text/css" href="http://www.anzata.org/themes/blah/css/typography.css?m=1260260916" />
<link rel="stylesheet" type="text/css" href="http://www.anzata.org/themes/blah/css/form.css?m=1256016875" />

If I make a change to attribute in ie6.css it gets overwritten by what is in layout.css (or typography etc) so my question is why is it not

<link rel="stylesheet" type="text/css" href="http://www.anzata.org/themes/blah/css/layout.css?m=1260297200" />
<link rel="stylesheet" type="text/css" href="http://www.anzata.org/themes/blah/css/typography.css?m=1260260916" />
<link rel="stylesheet" type="text/css" href="http://www.anzata.org/themes/blah/css/form.css?m=1256016875" />

<!--[if IE 6]>
<style type="text/css">
@import url(themes/blah/css/ie6.css);
</style>
<![endif]-->

<!--[if IE 7]>
<style type="text/css">
@import url(themes/blah/css/ie7.css);
</style>
<![endif]-->

Since no-one else is asking this I figure I have missed something simple but can someone help me out?

Thanks as always

Catherine

Avatar
Willr

Forum Moderator, 5521 Posts

9 December 2009 at 9:19am

This is a bit of a limitation with the requirements engine, it always writes the link tags to just before the </head>. My usual suggestion is just to use more verbose CSS selectors in your IE stylesheets.

// say you had this in layout
#Content p {}

// you would use this in IE.css, the html gives it a higher stacking order
html #Content p {}