Img in h2 not lining up in Internet Explorer

Question

I'm designing my personal website at the moment and want to have images inside h2 headlines in the same line. The markup I'm currently using validates, so does the css and the desired effect shows up on Firefox, Chrome, Safari and IE8 in standards mode.

IE8 in compatibility mode and IE6+7 however put the image into the next line which looks awful, of course. I'm not quite sure how to work around this and currently I'm stuck. Help and an explanation, possibly a pointer where I could educate myself more about those particular things with IE would be greatly appreciated.

The code can be viewed live here: http://storage.planet-tiax.de/test/index.html

Answer 1

Don't use the <img> tag for what you're trying to do. Although they are images, they are not what the <img> tag is meant for. The tag is meant to display images that are content on the page. In your case, the images are stylistic elements of the page and therefore belong in the CSS, i.e. as background images.

Placing the images instead inside the CSS, as background images, should also alleviate your IE concerns:

h2#weblog { background: url(images/weblog.png) right no-repeat }

As far as a resource that will let you know of IE headaches, I find that QuirksMode gives a good overview of the problems involved in IE, as well as some insight into how to fix them.