Image spacing problem in IE8

Fanny Cradock · 06-06-2011 1:01pm #1

I'm having a little problem with spacing in IE8. Images placed on top of a background image are off by a few pixels.

The below image hopefully illustrates the problem. With FF the image called banner.png is flush with the background image. However, with IE8 the image called banner starts after a few pixels - hence you can see the beginnings of splashes at the top of the picture on the right.

<head>
<style type="text/css">
#background{width:520px; margin:0; padding:0;}
#click{position:relative; top:-631px; padding:0; margin:0; width:520px;}
#banner{margin:0; padding:0; width:520px;}
#one{width:520px; margin:45px 0 0 0;}
img#breaking{margin:0 0 0 12px;}
img#involved{margin:0 0 0 40px;}
#two{margin-top:35px; width:520px;}
img#donate{margin:0 0 0 12px;}
img#newsletter{margin:0 0 0 39px;}
</style>
</head>
<body>
<div id="background">
    <img src="images/background.jpg" />
  <div id="click">
            <div id="banner">
            	<img src="images/banner.png" />
      </div>
            <div id="one">
                <img id="breaking" src="images/breaking.png" />
                <img id="involved" src="images/involved.png" />
            </div>
            <div id="two">
                <img id="donate" src="images/donate.png" />
                <img id="newsletter" src="images/newsletter.png" />
            </div>
  </div>
</div>
</body>

Pablod · 06-06-2011 3:39pm

<div id="background">
 [B]   <img src="images/background.jpg" />[/B]

Your images/background.jpg is just sitting there in the background div with nothing controlling it.
so default margins are probably being applied
wrap this in its own div and it should sort the poblem

like

<div id="background">
 <div id="backimg"><img src="images/background.jpg" /></div>

Hope this helps

Fanny Cradock · 06-06-2011 3:44pm

Yeah, I'll try that now.

:Edit:

Didn't work

Pablod · 06-06-2011 3:59pm

Have you tried applying zero margin & padding to that new div?

Fanny Cradock · 06-06-2011 6:30pm

Yes. I also have applied global resets to padding and margin. It's actually all images resting on the background that are being pushed down in IE8.

Pablod · 06-06-2011 7:49pm

there is only one other thing that could be causing an issue, i've only come across it on one occasion so am not 100% up to speed with it.
IE8 has a bug for 'top-margin' in some cases if rendered in comatability view for IE7 can cause issues

if you add this to your head section

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

It removes the top margin - it works in testing I've done

Let me know if its any use

Fanny Cradock · 07-06-2011 11:56am

No good, I'm afraid. Even when I tried this. The problem is that this will be going into a Facebook landing page and that doesn't require any meta data, AFAIK.

::EDIT::

Problem solved! I gave the backgound image an id (img#background) and made it relative. I then absolutely positioned #click (the div containing all the images)

img#background{position:relative;}
#click{position:absolute; width:520px;left: 0px; top: 0px;}

Giblet · 11-06-2011 1:40pm

I was going to post that you shouldn't be using positioning to that degree (I see this all the time and it causes lots of problems!), but you seem to have sorted it

Fanny Cradock · 12-06-2011 11:45pm

How would you have gone about coding it, Giblet?

Image spacing problem in IE8

Comments