A gap between 2 imgs in Internet Explorer 6

HTML & CSS
1

After testing my client’s home page in Internet Explorer 6, I discovered a gap between the slider imgs. Please see the attachment for the gap, and the html and css, which is below. Can someone please help me remove the gap? Thanks in advance.

Here is my html:


<div id="mainWrapper">		
		<ul id="mainMenu">
			<li><a href="#">Home</a></li>
			<li><a href="#">About</a></li>
			<li><a href="#">Accommodation</a></li>
			<li><a href="#">Facilities</a></li>
			<li><a href="#">Attractions</a></li>
			<li><a href="#">Contact</a></li>
		</ul>

		<div id="slider">			
			<img alt="" height="357" src="images/home-photo1.jpg" width="558" />
			<img alt="" height="32" src="images/slidernav.gif" width="558" />
		</div>
		
		<div id="welcome">
			<h1>Welcome</h1>
			<p>The Artesian Thermal Pools are reputed to benefit arthritic &amp; rheumatic complaints as well as providing relief of general muscle aches &amp; pains.</p>
			<p>Our caravan park provides the perfect setting for a relaxing &amp; rejuvenating holiday for those wanting to get away from the hustle and bustle of work and busy lifestyles.</p>
			<p><a href="facilities.htm#welcome"><img alt="Read more" height="32" src="images/readmore.gif" width="97" /></a></p>
		</div>
	</div>

Here is my css:


#mainWrapper {
	width: 100%;
	overflow: hidden;
}

#slider {
	float: left;
	width: 558px;
	display: block;
	line-height: 1px;
}

#slider img {
	line-height: 1px;
}
2

Are you sure that this is only showing up in IE6? Because you have a new line and a bunch of tabs/spaces separating the two images, and that should cause a little gap to show up in every browser (the image you attached hasn’t been approved, so maybe this is completely irrelevant!).

The reason is because images, by default, are inline elements. And when you have a bunch of spaces in between two inline elements, the browser thinks you wanted a gap there, but collapses it into a single space.

If that is indeed the problem, then the fix would be to get rid of the spaces in between the two images (or, in this case, move those spaces to a place where the browser won’t show them to the user):


<div id="slider">
    <img alt="" height="357" src="images/home-photo1.jpg" width="558"
    /><img alt="" height="32" src="images/slidernav.gif" width="558" />
</div>

Note that the linebreak/tabs are inside the first <img> element, instead of outside it.

3

Yes I am very sure that the gap is only showing in Internet Explorer 6. Sorry but I have never had any problems with spaces in my html, so I believe it is something do with the css.

4

Weird… I downloaded your HTML/CSS to see it for myself, and it looks like we’re both right.

The gap was indeed showing up only in IE6, but changing the HTML as I mentioned appears to have solved it.

It looks like IE6 has a problem with spaces and 1px line-heights that others browsers don’t.

5

Images are inline elements and the space between then is just like the space between words and the space underneath then is the room that text would allow for descenders.

As mentioned above closing the whitespace in the html would cure the gap but a more solid solution would be to set the images to display:block instead. If the images need to remain inline then setting their vertical-alignment to top should also cure the gap in most cases.

IE6 will always treat height as a minimum so your 1px line-height fixes won’t work unless you also set font-size to zero.

The simplest solution is to set the images to display:block where possible.:slight_smile: