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, biapar, Willr, Ingo, swaiba, simon_w

Order of css stylesheets


Reply


2 Posts   1514 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, 5513 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 {}