CSS - gap in UL using images with IE

Get Started
1

I’m trying to place a series of five images in an unordered list , all directly next to eachother. It works well in Firefox, but IE produces a gap between each image, like so:

I’ve seen fixes for gaps in a vertical layout, but couldn’t find any info on this. I have tried the ‘white space fix’ but to no effect.
TIA for any advice!



#footer ul {
		list-style-type: none;
		}
		
			#footer ul li{
				display: inline; 
				
		}
		
				#footer ul li img{
					float: left;
					display: block;
					border: 1px solid green;
			}





<div id="footer">

	<ul>
		<li><img src="footer1.png"></li>
		<li><img src="footer1.png"></li>
		<li><img src="footer1.png"></li>
		<li><img src="footer1.png"></li>
		<li><img src="footer1.png"></li>
	</ul>


</div>
2

You’re welcome :slight_smile: You had the float on the images. Instead I used the float on the li holding the images. see it as a parent child relationship

3

Thanks!
Not sure why, but it works perfectly. :slight_smile:

4

Try it this way:


#footer ul {
    list-style-type: none;
        }
        
 #footer ul li{
	float: left; 
}
#footer ul li img{
	border: 1px solid green;
}