Krusty MSIE Body Classes

This is a rather simple plugin that I put together for use with the Sandbox theme for WordPress. It requires a theme that uses the ‘body_class’ filter. The filter itself originated in the Sandbox theme, (I think), but has since found it’s way into several other themes. I know it is use in Sandbox, Carrington, and K2, it will also be used by child themes that are based on those themes, including my own SAZI (StoneAge Zen Industrial).

Once activated this plugin will use the ‘body_class’ filter to add Internet Explorer browser classes to the body tag of the sites front end, (public), pages. The reason this is needed is because Internet Explorer has a long history of incorrectly rendering css styles. Many workarounds and hacks have evolved over the years to get things ‘working right’ with Internet Explorer, but even these do not work from version to version. This plugin simplifies things by adding the following selectors to the class element of the pages body tag:

  1. browser-msie (For all visitors identifying themselves as Internet Explorer.)
  2. browser-msie-{MAJOR VERSION} (Where {MAJOR VERSION} = 3/4/5/6/7/8)
  3. browser-msie-{MAJOR VERSION}-{MINOR VERSION} (Only for Internet Explorer 5.5)
  4. browser-msie-old (For Internet Explorer version 6 or less)

So, if your site is viewed by a visitor that identifies itself as Internet Explorer 5.5 the body tag will look something like:

<body class="wordpress y2008 m11 d19 h22 home blog loggedin browser-msie browser-msie-5 browser-msie-5-5 browser-msie-old">

This would allow for css that targets Internet Explorer to do things like:

  • Set a fixed width for Internet Explorer versions that are to old to recognize the max-width & min-width attributes.

    Example Usage:

    /* Set fixed width for MSIE version 6 or less */
body.browser-msie-old div#wrapper{
width: 770px;
}


  • Adjust margins and padding for IE versions that blow them out of whack.

    Example Usage:

    /* Margin fix for MSIE 6 */
body.browser-msie-6 div#content div.navigation{
padding:.5em;
margin:0;
}


  • Show links to Firefox and Opera download pages only to IE users. :P

    Example Usage:

    /* Show links to modern browsers to Internet Explorer users. */
body.browser-msie .sidebar #real-browser-links{
display:block;
}


Installation:

This plugin will work with both WordPress and WordPress MU.

To install in WordPress:

  1. Download the plugin.
  2. Unzip the krusty-msie-body-classes.zip file.
  3. Upload the ‘krusty-msie-body-classes’ directory to the ‘/wp-content/plugins/’ directory on your server
  4. Activate the plugin through the ‘Plugins’ menu in WordPress.
  5. Consider using the Krusty Plugstyles plugin for easy per theme css tweaking!

To install in WordPress MU:

If you are using WordPress MU you have two options for installing this plugin. You can do it the same as you would in WordPress, which has the disadvantage of forcing manual activation on all blogs, or, you can follow these instructions:

  1. Download the plugin.
  2. Unzip the krusty-msie-body-classes.zip file.
  3. Upload the ‘krusty-msie-body-classes’ directory to the ‘/wp-content/mu-plugins/’ directory on your server
  4. No activation is needed when using this method.
  5. Consider using the Krusty Plugstyles plugin for easy per theme css tweaking!

The main disadvantage to this method is that WordPress will not notify you when the plugin is updated.

Change Log:

Version 1.0.0:

  • Initial release of the plugin.

Version 1.0.1:

  • Minor editing of the plugin information and the readme.txt file.

If you have other questions or comments feel free to leave a message in the comments on this page, or use the contact form to send me an email.

2 Comments

  1. baron
    Posted November 25, 2008 at 12:00 pm | Permalink

    hi. Thanks for plugin

    perfect.

    Regards

  2. Krusty Ruffle
    Posted November 25, 2008 at 5:24 pm | Permalink

    Thanks for the comment, glad you like it. :)

Post a Comment

Your email is never shared.