Franscape Development Tutorials
You are currently viewing the Debugging: Removing Space Between Images In IE tutorial, in the 'HTML' category.
-----------------

Since IE hasn't yet fallen off the face of the earth, we have yet another problem to deal with:

Note the structure below:

Code:

<div>
<img src="img1.gif">
<img src="img2.gif">
<img src="img3.gif">
<img src="img4.gif">
</div>


Rendering this in IE often yields spaces around these images (cannot be resolved by CSS), which -- if it isn't intended -- is destructive to any layout and, thus, any developer's patience.

IE's engine considers each image as it does a block of text, such that, in the following structure:

Code:

...
AAA
BBB
CCC
...


We would expect the result to be:

"...
AAA BBB CCC
..."

and not:

"...
AAABBBCCC
..."

We fix this by commenting out this whitespace, as it were, moving it into unrendered areas:

Code:

<div><!--
-->
<img src="img1.gif"><!--
-->
<img src="img2.gif"><!--
-->
<img src="img3.gif"><!--
-->
<img src="img4.gif"><!--
-->
</div>


-----------------
· Discuss this and other tutorials on the FS Forums.
· Return to the HTML tutorial listing.
· Return to the Tutorial Overview.
· Return Home.
Back.
Sponsored Links - Register and/or Login to remove it