@import

JStools CSS preventing IE browsers from loading default style.css in Drupal

It appears that loading the JStools tabs CSS @import derictive before the default line for CSS styles in a Drupal theme prevents the default styles from being applies in IE browsers (yes, including IE7 and IE8).

<style type="text/css" media="all">@import "/modules/jstools/tabs/tabs.css"</style>

I was able to zero-in on this particular line (above) by commenting out the &amp;lt;?php print $styles; ?&amp;gt; directive in the Drupal theme and instead hard-coded the tyle @import lines (you can get these by copying the source of your pages before you comment out $styles in our theme).

Armed with the @import directives in the source, I applied them all and then removed one by one and in blocks until I was able to isolate the line causing the problem.

Solution
Writing the default style file (style.css) before the tabs.css call will solve the problem. The simples way to implement this is to hard-code a link to styles.css before the

<?php print $styles; ?> call in the drupal theme. The only down-side to ths approach is the fact that you will end up with two calls t the style.css file, but that does not have visible effects visually, or in markup validity.

Valid XHTML 1.0 Strict
This site is accepts Oped ID authentication for login
This Website is Built Using Semantic Markup and Cascading Style Sheets (CSS)
Some usage rights are reserved, please contact us for approval before using it