IE 8 compatibility mode

Question

I have the following problem:

My css is the following:

.SPImage img
 {
 margin-top:-15px;
 float:left;
 white-space:normal;
 width:194px;
 height:149px;
 }

my HTML is the following:

<DIV id=SPImage class=SPImage>
<DIV style="POSITION: relative; WIDTH: 100%">
<IMG style="WIDTH: 165px; MARGIN-LEFT: 15px" title="test" alt="test" src="/resources/2710004.jpg">
</DIV>
</DIV>

I have the following setting in HTML head tag:

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

my problem is that when I'm using IE 8, I have image raised up to 15px due to margin-top:-15px; when using IE 7 and IE8 in compatibility it appears just ok. I can't remove margin-top:-15px; because it will look ugly in IE 7.

enter image description here

How can I solve this issue?

• MLS: use iedeveloper toolbar. change the margin and see the effect. changing it a little should work. else use inline style for test. if this doesn't work, you'll hav to use a separate css file to include in comments
• danny.lesnik: @MLS, I used Ideveloper, unfortunately it changing a little doesn't work. all problem is margin-top:-15px
• thirtydot: If you have IE=EmulateIE7 then it doesn't matter what it looks like in "IE8 mode". All IE8 users will see the site in "IE7 mode", in which it works.
• Luuk: Did you use a CSS reset at the beginning of your css file? this will solve alot of problems crossbrowser. This is a good css-reset: meyerweb.com/eric/tools/css/reset
• Spudley: I assume you have a doctype, otherwise you'll be in quirks mode, which makes IE go crazy, no matter what compatibility mode you're in.

Answer 1

When i do this:

CSS:

.SPImage img {
 margin-top:-15px;
 float:left;
 white-space:normal;
 width:194px;
 height:149px;
}

HTML:

<DIV id="SPImage" class="SPImage">
 <IMG style="WIDTH: 165px; MARGIN-LEFT: 15px" title="test" alt="test" src="img url">
</DIV>

In IE 7, IE 8, IE9, Chrome and FF it is looking the same?