IE7 rendering CSS incorrectly

Question

I'm working on a Wordpress site that is not showing quite right in IE7. All other browsers, including IE8 are OK.

First bug is in the top menu. IE7 is showing it to be a bit taller than it should be, and the hover images and search box are not aligned properly.

2nd is at the end of the post where additional page numbers are shown. The top border of the number boxes is being cut off.

Last is also at the end of the post. The text in the yellow bubble box is being pushed down into the bottom of the box.

http://www.archaeologyrevealed.com/another-test-post

Any ideas?

Answer 1

I suggest trying a CSS reset stylesheet first, which will put different browsers on the same playing field.

That's helped me many times with padding/margin/alignment inconsistencies.

Answer 2

You have to add some IE7 specific styles

Embed style inside HEAD element

<!--[if IE 7]>
<style>
// your styles...
</style>
<![endif]-->

or link to external css file

<!--[if IE 7]>
    <link rel="stylesheet" type="text/css" media="all" href="css/ie7.css"/><![endif]-->

For first bug try this:

#s {
   position: relative;
   top: -5px; 
}

Other bugs can be fixed by adding some margin or padding properties.

EDIT

Create ie7.css stylesheet and put this code inside. Then link to it with code posted above. It fixes all bugs you have mention in your post.

#s {
   position: relative;
   top: -5px; 
}

div.pagenumbers p {
   margin-top: 4px;
}

div.bubble_bottom {
   position: relative;
   top: 15px;
}