H2 tag width renders different in FF and IE9

If you look on the right, http://forensicon.net/blog/ - the width for the sidebar names renders differently in IE9 and FF. I'm not sure why it fills all the way to the right in IE9 even when I explicitly give it a width. I'd like to understand what is causing this behavior so I can avoid it开发者_运维问答 in the future.

---

The problem is you have a comment before the doctype. This puts IE into quirks mode and it won't attempt to perform like all the other far more modern browsers. Remove everything before the doctype.

---

Yes, this is an age-old problem. Different browsers have different defaults for things like header and list tags.

Use a CSS reset and explicitly style them the way you want.

---

There may be different CSS base styles defined by the browser that are causing it to render inconsistently. You might want to consider using a base reset CSS that resets all the styles to a common foundation across browsers, and then lay your custom CSS on top of it.

A very popular one out there is YUI Reset CSS http://developer.yahoo.com/yui/3/cssreset/