Questions about how to deal with Internet Explorer's quirky ways of displaying our lovingly styled Drupal sites have been dominating our Lab Hours sessions and Labtime email list. Since IE display issues seem to be on everyone's mind of late (always), I've drafted detailed explanation of using separate stylesheets to handle displaying Drupal sites differently in IE. I welcome your thoughts, and especially encourage you to comment on this tip by providing links to sites with info about styling for IE.
The fact that Internet Explorer, especially IE6, treats CSS standards differently than other major browsers gives themers fits as they scramble to find ways of "tricking" IE so that their sites will look the same in all browsers. Generally, I've found the easiest way of managing this workaround process is to have a separate stylesheet that loads only when someone is accessing the site using Internet Explorer. This is what I'll discuss here using the popular, highly customizable, Drupal custom theme Framework as an example. Feel free to follow the link, and download the theme files to follow along.Separate IE CSS declarations are, as you might suspect, provided (or not) by whichever theme you are using. Some themes and themers mash all of their styles into one stylesheet using syntax hacks that allow some styles to be hidden for different browsers. Using a process much easier to manage, not to mention one that utilizes standard CSS, the Framework theme supplies a separate IE stylesheet file called "fix-ie.css" to handle the sticky IE situations.
The questions of How and When to use this strategy is two-fold.
First, you need to check your theme's page.tpl.php file (usually) to determine when/if a separate stylesheet for IE loads. In the section of the Framework theme's page.tpl.php you'll find the following:
<!--[if lte IE 7]><:?php print phptemplate_get_ie_styles(); ?>This tells us that it is calling a function named "get_ie_styles." if "lte IE 7." This means if the browser accessing your site is Internet Explorer of version less than or equal (LTE) 7. This tells us a few things. It tells us that the stylesheet will not load if the site is being accessed by any browser that is not IE or higher than IE7.
<![endif]--><!--If Less Than or Equal (lte) to IE 7-->
To learn what else the phptemplate_get_ie_styles function does, you need to find where this function is defined. In Drupal themes, the prefix "phptemplate" in a function statement denotes that this function is a theme override-- it is either overtaking a function that Drupal does in its core or it's a custom function that the site's developer has defined for the site. In either case, the most common place to find the function and what it does is inside the theme's template.php file. This is a pure PHP-coded file that provides some core functionality for the theme's display of your Drupal site. Custom functions and theme overrides are often placed in this file. In Framework's template.php file you'll find the following code for this function:
<a href="http://drupal.org/project/framework">**Now we know that this function will add a call to the fix-ie.css file located in the site's custom theme directory (path_to_theme). We also find an additional function: phptemplate_get_ie6_styles (). This calls a separate stylesheet called fix-ie6.css. In looking at Framework's page.tpl.php, I don't see this function being used. So, I can deduce that there is but one alternate stylesheet for IE being called and used by the theme. But it is interesting and important to note that we could add the second ie6 function or substitute it for the broader fix-ie which is being called for IE7 and below. Keep this in mind as you determine what IE fixes you need to make as IE7, for instance, fixes some of the buggier problems that are rampant in IE6; this makes some fixes only necessary for IE7 and sometimes these "fixes" break stuff in IE7. Yes, can I get a rousing "IE is evil!"
* Generates IE CSS links.
*/
function phptemplate_get_ie_styles() {
$iecss = '';
return $iecss;
}
function phptemplate_get_ie6_styles() {
$iecss = '';
return $iecss;
}
So that takes care of when and how the fix-ie.css file is called. The other consideration, as I just alluded to in the previous paragraph, is what do you need to fix and how broadly does it need to be applied? If you need to include a style that will override something either in core Drupal or in your theme's style.css and have this override only apply to IE, then you should put it in the fix-ie.css stylesheet since it is being loaded automatically only for IE browsers. If, however, you need to make a fix to just IE6, it may make sense (using this Framework example) to generate an fix-ie6.css file and add a call to this stylesheet by placing a conditional statement in your page.tpl.php that mirrors the one there now but changes the "LTE IE 7" to "LT IE 7" or "if IE 6". If you need only fixes to IE6, you can simply change the statement so it loads for IE6 only and just make adjustments to the fix-ie.css file that currently exists.
For those of you using a theme other than Framework and do not wish to add a custom function to your template.php, you can get the same functionality simply by adding a conditional link to a separate ie.css stylesheet inside the <head> section of your page.tpl.php (same place the Framework function statement lives) like this:
<!--[if IE 6]> <link rel="stylesheet" type="text/css" href="iespecific.css" / > <![endif]-- >Of course, you'll need to create that iespecific.css file and put it in your custom theme's folder. You will also want to specify the specific IE version(s). This code specifies loading the iespecific.css if and only if the browser accessing the site is IE 6.
From here, it's a situation of digging up fixes for the display issues you are seeing in IE and trying them out in the separate IE stylesheets. I welcome the posting of all tips, links to sites with more info, as well as corrections to and expansion of my explanation. Happy themeing.
Comments
Post new comment