dougv.com | The Web home of Doug Vanderweide

I use Firefox because it is a vastly superior Web browser compared to Internet Explorer, Opera and all the other minor browsers out there. But I do check my Web work in all three browsers, and I’ve noticed, for quite a while, that the TypoXP theme has never quite looked right in IE.

Namely, the sidebar links section — which appears fine in Mozilla-based browsers — has been indented improperly in IE. Look at this screencap to see what I mean:

I have been of two minds about the problem. Mostly, I felt I should fix it, because I don’t want my blog to look like it is run by an incompetent. But I also felt that hey, screw people who use IE; I hate it, I don’t care if things look bad to them, and not fixing it is just another way to encourage people to graduate to a better product.

My urges to be professional have won out over my personal animosities. I’ve identified the source of this problem and how to fix it.

First off, it’s important to note that this problem occurs only if you have many blogroll links and several blogroll categories. If you only have a few links, you’ll probably not experience this issue at all.

If you do have this problem, however, you can spot the offending code in /wp-content/themes/typoxp-2.0/style.css. Specifically, it’s this line:

94

#sidebar ul.links li {float:left;display: inline;overflow:hidden;border:none; padding-left:0px;}

And namely, in that line, it’s the float:left; instruction that causes Internet Explorer to run the text, oddly enough, off to the right of the layout. If you simply delete that part of the style, IE (Version 7, at least) will render the links properly, and it won’t have any effect on Firefox 2:

94

#sidebar ul.links li {display: inline;overflow:hidden;border:none; padding-left:0px;}

Had I known the fix would be that simple, I’d have done it months ago. Now you know and you have no excuse, except your hatred of IE, to make this minor theme hack.