Fixing Star Crash Blogger Theme in IE

The theme I am currently using for this blog, Star Crash by Blogcrowds, doesn't natively display correctly in Internet Explorer. The entire sidebar ends up at the end of all the blog posts, and that's really not acceptable. Here's how to fix that.

The Underscore Hack

The underscore hack is a way to hide certain CSS rules from all browsers except IE. Because our page renders correctly in more standards-compliant browsers (Firefox, Safari, etc.), we don't want to change the CSS for all of them. By putting an underscore in from of our property name (width: becomes _width:), we can show CSS to IE and all other browsers will ignore it. You can read more about this hack here.

The !important CSS Flag

The !important flag in CSS sets a rule to have precedence over any other rule that conflicts with it. If you have a paragraph with the class "note," and there are two rules that apply to that class, the one with the !important flag will take precedence. It can be quite handy. Here's an excerpt from the excellent book CSS Mastery by Andy Budd on the cascade and specificity:

With even a moderately complicated stylesheet, it is likely that two or more rules will target the same element. CSS handles such conflicts through a process known as the cascade. The cascade works by assigning an importance to each rule. Author stylesheets are considered the most important, followed by user stylesheets, and finally the default stylesheets used by your browser or user agent. To give users more control, they can override any rule by specifying it as !important–even a rule flagged as !important by the author.

The cascade works in the following order of importance:

• User styles flagged as !important
• Author styles flagged as !important
• Author styles
• User styles
• Styles applied by the browser/user agent

The Fix

The <div> element we need to change the style of has the ID of #beta. I, unfortunately, am not entirely sure why IE wants the element's position to be absolute, but that seems to solve the problem. Using our newly-acquired knowledge of the IE underscore hack and specificity in CSS, here's the code we need to insert into our template:

#beta {
    _position: absolute !important;
}

Voila! The Star Crash Blogger theme now renders correctly in Internet explorer. You can insert the code anywhere in the template; I inserted mine near the top so I can remember that it's a manual edit I've made.

If you've fixed your Blogger template, learned about the IE underscore hack for the first time, or learned something new about CSS, let me know in the comments! I always like hearing from you.