CSS Hack Added

Send to Kindle

When I upgraded to WordPress 2.5 I articulated a few UI problems on my site. Here’s the relevant section:

1. The Sociable plugin is once again formatting the bullets in a block list, rather than inline. This can be fixed with my own css (as I’ve done in the past), but I have no idea what broke in the upgrade…
2. TinyMCE (in WP2.5) won’t allow me to display the link editor (AJAX form). It comes up blank. I am posting this from IE until I figure that out. Not cool, but also not stuck…
3. This ordered list is not showing the numbers in IE7, but is in Firefox. 🙁

#1 above turned out to be simple. There was a checkbox that I needed to set in the Sociable options to apply the sociable.css file. This was either a new option that I didn’t need to set before upgrading both the plugin and WordPress, or something in the upgrade to WordPress coupled with a deactivate/activate of the plugin caused that setting to be lost.

#2 auto-corrected itself. I’ll guess that the next time I restarted Firefox it just worked, and I panicked prematurely.

#3 was the real thorny problem, and is the subject of this post.

It’s likely that this bug existed for a few weeks before I upgraded to WordPress 2.5. Most certainly, it is not related in any way to WordPress at all (any version).

When I installed the SandPress theme (based on the Sandbox Theme Template) which is linked in the footer of every page on this site (unless you’re reading this in the future, and I’ve changed my theme again) 😉 I decided to tweak it (which was a CSS change only).

One of the things that I did was remove the attribute “list-style-position:inside”. I hate the fact that ordered lists that span multiple lines have text under the number. It not only looks bad (IMHO) it makes it less readable. By removing the “inside”, I got the default of “outside” (without specifying it), and I immediately tested in Firefox (my default browser), and it worked correctly, and I was done.

When I upgraded to WordPress 2.5 I did it on my laptop first. I just happened to test in IE first, and noticed that I have no numbers on any ordered list. I tried a number of things but couldn’t get it to work. I thought that it was something related to the WP 2.5 upgrade, so I needed to decide whether I’d just live with it temporarily, or back off the upgrade. I decided to live with it.

It altered my behavior. In a recent post, I really wanted an ordered list, but I hated the look in IE without the numbers, so reluctantly turned it into a bulleted list. 🙁

Earlier this week I finally took some time to track it down. That included installing an IE development addon which does what the Firefox DOM Inspector does. I had assumed that in IE, the problem was the “list-style-type” wasn’t being set to decimal. I was wrong. It was correctly set to decimal! I was truly stumped. I tried a number of other things, and then gave up.

Today, it occurred to me that there’s no way that the original SandPress theme was broken this badly. So, I switched (on my laptop) to the untweaked SandPress theme, and voila, IE showed ordered lists with numbers. Good. Now I did a diff on the original style.css file with my tweaked version. The difference was obvious, namely the inclusion in the original file of the attribute “list-style-position:inside”, which I had removed.

So, it appears that the designer of SandPress knew that IE7 couldn’t correctly render “list-style-position:outside” (whether explicitly set, or defaulted). So, he threw up his hands and set it to inside, and lived with it. I totally understand that decision, but for me, I wouldn’t be happy with seeing it this way in Firefox.

So, I did a quick search and found this blog showing a variety of CSS hacks. Here’s the relevant section on targeting IE7:

Target Internet Explorer 7:
[className=”actualClassName”] { … }

In case you aren’t familiar, you can either target or filter specific browsers. Targeting means that the rest of the line will only apply to that particular browser. Filtering means that the rest of the line will not apply to the specific browser.

In this case, I wanted the default to be outside for all browsers, but for IE7 to be inside. That meant targeting IE7 with the inside clause.

It worked perfectly. Now, ordered lists look like I want them to in Firefox, and look poor (to me) in IE7, but at least have numbers. Whew.

Back in business. 🙂