Last updated May 6, 2011. Created by LeeHunter on March 16, 2010.
Edited by Carolyn, Tor Arne Thune, davidneedham. Log in to edit this page.
You can add a browser-specific style sheet.
Drupal 6
Below is a Drupal 6 theme example for including IE6< targeted CSS files. (Examples are taken from the Garland theme found in the Drupal core installation.)
page.tpl.php:
<?php
...
<?php print $styles ?>
<!--[if lt IE 7]>
<?php print phptemplate_get_ie_styles(); ?>
<![endif]-->
...
?>template.php:
<?php
...
function phptemplate_get_ie_styles() {
global $language;
$iecss = '<link type="text/css" rel="stylesheet" media="all" href="'. base_path() . path_to_theme() .'/fix-ie.css" />';
if ($language->direction == LANGUAGE_RTL) {
$iecss .= '<style type="text/css" media="all">@import "'. base_path() . path_to_theme() .'/fix-ie-rtl.css";</style>';
}
return $iecss;
}
...
?>Drupal 7
Drupal 7 adds the ability to specify a 'browsers' key when calling drupal_add_css().
template.php:
<?php
...
function yourthemename_preprocess_html(&$vars) {
...
drupal_add_css(path_to_theme() . '/fix-ie.css', array('weight' => CSS_THEME, 'browsers' => array('IE' => 'lt IE 7', '!IE' => FALSE), 'preprocess' => FALSE));
}
...
?>See the API documentation for drupal_pre_render_conditional_comments() for details on the 'IE' and '!IE' keys.
It is recommended for themes to always use drupal_add_css() for adding a CSS file, so that Drupal code knows the exact total number of CSS files being added. This is information that might be needed for working around Internet Explorer's limitation of only being able to load the first 31 LINK/STYLE tags.
Comments
Browser specific style sheets in theme.info file
In Druapl 6 browser specific style sheets can be added via the .info file using the following syntax:
conditional-stylesheets[if IE][all][] = ie.css(see http://drupal.org/node/134569)
-- SweeneyTodd
Need a module
As a side note for this, you'll need to install an additional module to make use of this syntax: http://drupal.org/project/conditional_styles
loading order of conditional stylesheets
Using the recommended version of drupal_add_css did not work in my case because the conditional stylesheet for IE loaded before the default mytheme.css.
I took the "bartik" solution and the conditional stylesheet was added/ loaded as the last, so i don't have overrides.
<?php...
function garland_preprocess_html(&$vars) {
...
drupal_add_css(path_to_theme() . '/fix-ie.css', array('group' => CSS_THEME, 'browsers' => array('IE' => 'lt IE 7', '!IE' => FALSE), 'preprocess' => FALSE));
}
...
?>
Mac Firefox
There are plenty of solutions for IE since IE accepts alternate styling, a piece of cake actually, whereas webkit can accept certain "wrappings" around CSS, works for me thus far. Firefox accepts certain css tags such as >font-size-adjust< which is very helpful in balancing font sizes, on Firefox 3 and above.
The problem for me is that these Firefox unique tags are NOT supported on Macs and to make matters worse, Firefox unlike IE, does not accept browser specific conditional style-sheets.
So, is there a conditional browser specific for Firefox?
Firefox specific CSS
I am also having the same problem. I have CSS that works good in Chrome and IE but giving problem in Firefox. how can I use firefox specific in drupal 6?
--
with kind regards:
Shabir Ahmad-Senior Software Engineer
Vizteck Solutions