How 2 remove white space around images in IE

Get Started
1

Hi Friends,

When I am puttting 2 images side by side, I am getting some space around the images in IE but its fine with Mozilla.
Can any one plz suggest how to remevo white space around image in IE.

Following is the my code:

<div id="abtus">
	<div id="abtusimg"><img src="images/abt-us.jpg" height="169" width="190"></div>
	<div id="servimg"><img src="images/cnt-us.jpg" height="169" width="190"></div>
		

</div>

div#abtusimg{
	
	height: 169px;
	float: left;
	width: 190px;
}
div#abtusimg{
	
	height: 169px;
	float: left;
	width: 190px;
}
img{
	margin: 0;
	padding: 0;
	border: 0;
}
2

check your padding value for the divs (not the images)…try setting those to 0.

also, this might help:

img {
	display: block;
}
3

I have an odd feeling that it’s because of the spacing problem, instead of writing your div tags in two line, write them one after another without space in between like this:


<div id="abtusimg"><img src="images/abt-us.jpg" height="169" width="190"></div><div id="servimg"><img src="images/cnt-us.jpg" height="169" width="190"></div>

Then see what happens

4

I had the same problem and found the answer here:

img {vertical-align:bottom};
5

display: block is sort-of the answer, just be aware that it can have side effects…I generally only use it where its needed and not global.

6

display: block doesn’t work in my case (see header pics). That lined them up in a stupid vertical row with even bigger gaps between pics.

7

Thanks, just came across the same problem and found this thread and this helped me get around the problem I was facing. It’s pretty dumb how the way I want to write my code has to be changed so it displays properly! Hopefully they’ll fix this sometime but it does it in all the latest browsers still so the problem will still be around for a while yet!

8

Here’s 3 methods to fix this issue:

  1. font-size:0 on element that contains the images
  2. display: block on image (will have issue putting images side by side)
  3. eliminate ALL white space between end of image and beginning of next open html tag

This issue occurs becuase IE likes to render empty white space as a text node element even if no other characters follow. Go figure… another annoying IE issue.

9

Yes, Unbelievable.

I tried lots of things, but in the end this worked for both IE & Firefox. Why is HTML so buggy !!!

DID NOT WORK


<html>
<body>
<img src="MyImage.jpg" width="14px" height="14px">
<img src="MyImage.jpg" width="14px" height="14px">
</body>
</html>

DID WORK


<html>
<body>
<img src="MyImage.jpg" width="14px" height="14px"><img src="MyImage.jpg" width="14px" height="14px">
</body>
</html>

Ditto if using divisions with CSS.

THANKS A LOT.