Internet Explorer can be a real pain when writing CSS :(. It seems that others have struggled with cross-browser compatibility issues, but using Thesis, I was able to conquer most of these issues on my own :D…
First, take note of the body classes called when your site is viewed in IE (you can see this by viewing the source code in the right-click context menu when you’re on the page with the problems). In IE8, my about page looks something like this:
body class=”custom about ie ie8″
While in Firefox 3.5, my about page looks like this:
body class=”custom about”
This will enable you to create CSS rule(s) which will apply to your site only when users view it in an IE browser.
Second, in IE8 you can tweak your pages (much like Firebug for Firefox) with the built in Developer Tools (Navigate to the ‘Tools’ menu and you should see it beneath there).
The developer tools will open up in another window. Select the CSS tab at the top and then you should be able to select your custom.css style sheet from the drop down menu. As you un-check/check the boxes next to the different CSS rules, you will be able to see the changes made live to your webpage in the other window. You will also be able to change the current styles and add new ones (right-clicking in the developer tools window has some useful functions for adding rules to your style sheet).
Finally, changing your custom.css in developer tools won’t make your changes permanent, so once I get things right, I usually just make the changes manually to my custom.css (there may be a better way, but this is what works for me).
Good luck!
P.S.
Just to be clear, the information above refers to my setup which includes:
- Firefox 3.5
- IE8 (Thesis will apparently read which version of IE the site is viewed in and will display the appropriate body classes – IE6/IE7/etc. – allowing even more specific CSS rules)
- WordPress 2.8
- Thesis 1.5.1
When identifying the IE specific rules in your custom.css file, it is not necessary to include the .custom class specification. Instead, use the appropriate IE body class. For instance:
.ie #header { border-top: 1px; }