[Alhazred]

I'm creating a menu bar, I can show it correctly one any browser but IE7 and 8.

The code is

<img src="images/sp_left.gif" alt="left" style="float:left;" />
<a href="#">
    <img src="images/btn_01.gif" alt="btn01" style="float:left;"/>
</a>
<img src="images/sp_01.gif" alt="sp01" style="float:left;"/>
<a href="#">
    <img src="images/btn_02.gif" alt="btn02" style="float:left;"/>
</a>
<img src="images/sp_02.gif" alt="sp02" style="float:left;"/>
<a href="#">
    <img src="images/btn_03.gif" alt="btn03" style="float:left;" />
</a>
<img src="images/sp_03.gif" alt="sp03" style="float:left;"/>
<a href="#">
    <img src="images/btn_04.gif" alt="btn04" style="float:left;"/>
</a>
<img src="images/sp_04.gif" alt="sp04" style="float:left;"/>
<a href="#" ">
    <img src="images/btn_05.gif" alt="btn05" style="float:left;"/>
</a>
<img src="images/sp_06.gif" alt="sp06" style="float:left;"/>
<a href="#" ">
    <img src="images/btn_06.gif" alt="btn06" style="float:left;"/>
</a>
<img src="images/sp_07.gif" alt="sp07" style="float:left;"/>
<a href="#" ">
    <img src="images/btn_07.gif" alt="btn07" style="float:left;"/>
</a>
<img src="images/sp_right.gif" alt="right" style="float:left;"/>

And this is a piece of CSS code

a {
    outline:none;
    text-decoration:none;
    margin:0;
}

img {
    border:none;
    margin:0;
}

This is the result on Firefox, Opera, Safari and Chrome


And this is the result on IE 7 and 8


How do I remove the space between the images on IE?

[EnvXOwner]

Try adding a:

padding: 0;

[Alhazred]

I've tried, but the result is the same.

[Alhazred]

Solved, I've added some rules for IE only which give a negative margin to images.

This post has been edited by Alhazred: 10 March 2011 - 03:38 AM