Issue with the way my site looks in IE8 compatibility view [closed]

Question

This question is unlikely to help any future visitors; it is only relevant to a small geographic area, a specific moment in time, or an extraordinarily narrow situation that is not generally applicable to the worldwide audience of the internet. For help making this question more broadly applicable, visit the help center.

Closed 8 years ago.

I'll try to make this as simple as possible. I'm working on a site right now which you can see at http://wordpress.myecsinc.com. Keep in mind this is a TEST site and it is not done, that being said theres a lot of errors here and there but I plan on fixing it all.

Anyhow, when I check out the site in IE8 compatibility view, two of the images at the bottom end up smushed together (so to speak). When I get out of compatibility view it looks just as it should. Does anyone have any ideas what might be causing this and how I could fix it?

I tried to attach a screenshot but it won't let me since I'm new to this site. Just open up the site in IE8 and switch to compatibility view and you'll see what I mean.

Thank you in advance!

Answer 1

The left image has the following css class which is causing the issue:

.index-nav-img {
    position: absolute;
    z-index: 0;
}

If the class is removed then the alignment is fixed. Is there some reason for this class to be on the first image and not the others?

Note I tested this in firefox.

Answer 2

Use the appropriate meta tags to force IE out of compatibility mode and not have to worry about this problem. The appropriate tag is:

<meta http-equiv="X-UA-Compatible" content="IE=edge" />