This tutorial, republished upon request, has been amended with less immature brattiness, additional information which the author has lovingly gathered about one-upping her favourite screwball browser over the last two years, and a raging ‘beginners only’ alert.
For more help, see the great Sam Devol’s post Wordpress Troubleshooting: My Blog Looks Horrible in IE!
It’s not your fault. It’s not Internet Explorer’s fault. It was born that way, and Microsoft developers are jackasses.
The obligatory IE debugging tutorial blame game out of the way, let’s run through what is and what isn’t pushing your sidebar into undesirable locations on your hospitable IE browser page.
Things that aren’t ruining your design in IE
- Sidebar widgets – If disabling all of the widgets on your site hasn’t produced anything in the way of a non-massacred sidebar in IE, read on.
- Your site isn’t validated – While validation is important (as a former validation rebel turned zealot, I can attest that validation isn’t that hard to get started with), on most occasions it is not the solution to lining your sidebar and content sections up.
Things to do to de-ruin your design in IE
- Install your CMS locally onto your computer (optional)
- Apply a reset to your CSS stylesheet
- Create a separate stylesheet for IE
- Modify your CSS settings: width
- Modify your CSS settings: margins and padding
- Read further on IE rendering problems
1. Install your CMS locally onto your computer (optional)
If you already have your preferred CMS locally installed, or have no problem with tinkering with your site’s stylesheet and uploading your files by FTP every time you want to check your results, skip this step.
If you prefer a speedier testing process, it is recommended that you install the latest version of your CMS onto your local machine. For Wordpress:
- Mac owners – download MAMP using this great installation guide.
- PC owners – download XAMPP using this great installation guide.
2. Apply a reset to your CSS stylesheet
All browsers, not just IE, like to apply their own rules to your sob-inducing work of beauty. However, not modifying your stylesheet to effectively override these rules can be most problematic when it comes to rendering your site in IE.
Perishable Press’ A Killer Collection of Global CSS Reset Styles goes into vastly more detail about CSS resets, including the current two most popular CSS reset methods:
- Yahoo’s YUI Reset CSS
- Eric Meyer’s Reset Reloaded
For those less mindful of miniscule site loading issues who also prefer a cleaner stylesheet, the universal selector is your best fit.
* { padding: 0; margin: 0; }
3. Create a separate stylesheet for IE
Sometimes a CSS reset isn’t enough, and a separate stylesheet is required to fix up your sidebar in IE.
- Duplicate your existing stylesheet, rename it to something like iestyles.css, and save it into the same directory as your existing stylesheet.
- Add the following code between your [head] tags (for Wordpress users, that would be before [/head] in your theme’s header.php file):
<!--[if IE 7]>
<link rel="stylesheet"
xhref="/* IE stylesheet URL */"
type="text/css" media="all" />
<![endif]-->
Next: modify the relevant CSS elements in your IE stylesheet
Stay tuned for the second part of this tutorial, which will guide you through the last three steps of your IE-one-upping journey.
(Go to Part 2 of this series)
