Forum Moderators: not2easy

Message Too Old, No Replies

Floated images have mystery space between them in IE

IE Quirks Mode

         

Fotiman

2:02 pm on Jun 24, 2008 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month




<div id="nav"><img src="images/navLeft.jpg"><img src="images/navOneOff.jpg"></div>

The img elements are floated left, and have 0 margin and padding defined, yet for some reason there is a small gap between the images. Anyone know what might cause this and/or how to fix it?

Thanks.

D_Blackwell

3:23 pm on Jun 24, 2008 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Can you live with an <ul>?

<html>
<head>
<style>
img {
width: 100px; height: 100px;
}
ul {
margin: 0; padding: 0;
}
ul li {
float: left;
}
</style>
</head>
<body>
<div id="nav">
<ul>
<li>
<img src="aaa.jpg">
</li>
<li>
<img src="ccc.gif">
</li>
<li>
<img src="aaa.jpg">
</li>
</ul>
</div>
</body>
</html>

gracesaieva

5:53 pm on Jun 25, 2008 (gmt 0)

10+ Year Member



I'm no pro, so I don't know if my suggestion would help, but how about if you did something like:

#nav img {display:inline}

I think I read somewhere that i.e. considers images to be block elements and so will put a little space between them.

D_Blackwell

8:42 pm on Jun 25, 2008 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



gracesaieva -

Thats works fine - provided that there are no space or line breaks between the images in the code. Otherwise, it breaks in IE. Personal preference dictates choice.

<div id="nav">
<img src="aaa.jpg"><img src="ccc.gif"><img src="aaa.jpg">
</div>