Theming Drupal in Internet Explorer
In a perfect web developer world, every browser would work perfectly for all users, saving us as developers countless hours of time and frustration. This is especially true when it comes to working with CSS or more specifically, theming a website in Drupal. No matter how great your theme is, there will inevitably be some weird display, spacing or alignment issue that looks great in one browser but is a complete mess in another.
Sadly, the main culprit of these unfortunate theming problems is more often than not Internet Explorer and its many different versions, from IE 6 to the soon to be released IE 9. I won't pile on with the IE hate here because lord knows that if you are a Drupal themer, you have experienced it many times over.
Instead, I've compiled a few modules and tricks that can save you from screaming too loudly at your monitor when it comes to testing. These are geared towards solving many of the inherent issues in IE, but may still be of use for other browsers as well.
The 30 stylesheet problem
For some reason, Internet Explorer is only able to handle 30 stylesheets at a time when rendering a page. In the days of coding each page by hand, this wasn't too much of an issue, but with a CMS such as Drupal, many different modules can add in their own stylesheets and quickly push you over this limit, causing your site to not load the last and most important stylesheet of your theme, style.css (or some variant thereof).
Drupal 6 can account for this natively by using Optimize CSS Files (admin/settings/performance) and put all of your stylesheet into one file, but when it comes to theming and testing a site, this can be quite frustrating as the rendered stylesheet gets named something like css_1234abcdefg567.css. Luckily, there are a couple of work arounds for this that can make your theming easier.
IE CSS Optimizer extends the ability of the Optimize CSS Files option by giving you more freedom over what gets optimized and what doesn't. In addition to full or no optimization, you can also enable it for just theme development or just module development, depending on the theme or module you select.
IE Unlimited CSS Loader is another option to this problem, but does offer some performance issues by using the @import statement, which may cause problems with your javascripts on the page.
Fortunately, this overall issue has been resolved in Drupal 7 so as Drupal continues to be developed, this problem should disappear. But for Drupal 6 sites, these two modules are essential.
Conditional Stylesheets
As any themer knows, when it comes to getting your site to look the same in all browsers, you often have to employ conditional stylesheets for each version of Internet Explorer.
If you use a lot of page.tpl.php files in your theme though, this can get tedious to add the conditional comments code to each and every page. The Conditional Stylesheets module addresses this directly at the theme level, by building them into your theme's .info file, thus telling Drupal to load them each and every time a page is loaded, meaning you only need to call them once and leave your .tpl.php files alone!
Some themes, such as Zen and Genesis already make use of this module inherently in their theme, but if you are using some other theme or one of your own, this module can save you a lot of time and frustration.
PNG Issues (IE 6)
Despite nearing its 10th birthday, there are still a number of users out there that use Internet Explorer 6. This means very limited support for PNG images, and complete lack of transparency for .png files that are transparent. While there are many resources on the web to address this issue, such as the TwinHelix fix, there are a couple of great Drupal modules that save you the time of having to setup these hacks.
PNG Behave! is an oldie but goodie that I still use today to help address this issue. All you have to do is install the module, tell it what CSS selectors to apply the PNG fix to and let it do its magic.
The PNG Fix module is a bit more updated but it does essentially the same thing, allowing you to specify the classes and IDs that need to be corrected for IE 6.
Until Internet Explorer 6 dies its final death, there will still be a use for these modules if any themer wants to extend the style of their site with transparent PNGs.
Rounded Corners
One of the simplest (and yet maddening in it's lack of support in browsers) CSS effects is the rounded corner. Internet Explorer 6 & 7 simply do not support the "border-radius" CSS property, and Firefox requires the use of "-moz-border-radius" to support this feature. Enter Drupal once again to save all of us themers from making .gif images with rounded corners!
The Rounded Corners module uses jQuery to fix this problem, tapping into Drupal's built in jQuery support to allow you to plug-in the CSS selector(s) that you want rounded and viola, instant cross-browser support!
The bottom line is, when it comes to theming in Drupal, few experiences are more frustrating than working with Internet Explorer. Hopefully with these modules, you will be able to save yourself a lot of time, and make your site look great no matter who the audience is!
Did we forget a module or leave something out? Share your tips for theming Internet Explorer in Drupal in the comment section below!
