Tuesday, 6 March 2007

Alternate stylesheets

I am currently running three sites.
Not being one to reinvent the wheel, I am running them all with Wordpress, Sandbox and Unsleepable for Sandbox, a combination I find manageable and appealing.
unsleepable-ie
Unfortunately, when everything is much the same, the same problems will appear as well! Check out the following screen shots of CastletownChemist.Com under firefox and IE7 for windows:
As you can see, while similar, they do not look the same. The net seems awash with bloggers having problems with IE (firstly IE6 and even now IE7) messing with their look-and-feel. My problem (the nav menu being below the title rather than next to it) seems to be minor in comparison to some.
I found two posts from last year that have addressed the problem (both were focussed on IE6, but the problem remains): Sam Devol's "WordPress Troubleshooting: My blog looks horrible in IE!" and Nektros' "7 step guide to fixing your Wordpress sidebar in Internet (bloody) Explorer".
unsleepable-fx
Neither of these related directly to my setup, calling for an addition to header.php in the theme file. Because Sandbox then calls another function within header.php, I needed to dig a bit further.
Now please understand, I do not know php and I only know basic programming principles, but I can look at what others have done and try to steal their ideas.
This is what I did:
  1. Create an iestyle.css file in the unsleepable directory (/wp-content/themes/sandbox/skins/unsleepable)

  2. Found functions.php in /wp-content/themes/sandbox

  3. Edited the function sandbox_stylesheets() by adding the following code under the existing stylesheet link:


    <!--[if IE]>
    <link rel="stylesheet" href="<?php echo get_template_directory_uri() . "/skins/$skin/iestyle.css" ?>" media="screen" />
    <![endif]-->
In English, this checks if the browser is Internet Explorer, and if it is, calls another stylesheet (in the directory of the current skin) and uses it in addition to the regular stylesheet (and with priority over it).
I have done this and confirmed that it does in fact give styles to the page. Now I just need to go through Nektros' article to see what I can actually do to the CSS to improve my problem.