The problem with IE (Internet Explorer) is that if you out an image inside some other element it gives you a blank space after an image.
For instance:
<div style="border: 1px solid black;>
<Img src="developer.jpg" alt="Developer" />
<div>
This will give you a space on the right side of the picture to the border. Very annoying!
If you place another item next to it, it will still add the blank space, and disturb two images that are meant to be together.
IE (Internet Explorer) creates a linebox for whitespace that follows the IMG tag, and this leaves
space for the descenders of p's and y's. "p" and "y" is not placed the same vertical place as "a" and "c" which is the problem that causes this. The base of the image is
aligned by default with the base of normal letters, a's and c's.
FIX 1:
Add "vertical-align: bottom" to the IMG style or css class.
This will sit it flush with the bottom of the descenders, and there will be no gap underneath.
FIX 2 (DIRTY):
If you remove any trailing whitespace in your code it removes the error as well.
For instance:
<div style="border: 1px solid black;>
<Img src="developer.jpg" alt="Developer" />
<div>
ends up being
<div style="border: 1px solid black;><Img src="developer.jpg" alt="Developer" /><div>
so there is no whitespaces in your code following the image and the next element.
