[thelist] CSS Image Spacing in IE/Firefox

[Richard Davey]

Hi,

In an XHTML 1.0 Transitional document, the following will align two
images next to each other:

<div id="header">
        <div class="header_image"><img src="images/bfc_logo.gif" width="212" height="99" alt="" /></div>
        <div class="header_image"><img src="images/header_1.jpg" width="389" height="99" alt="" /></div>
</div>

Except there is a small (few pixels) gap between the images. If I
remove the carriage-return and tabs between the two image DIV tags
then the gap disappears.

The CSS is quite simple:

#header {
clear: all;
width: 601px;
padding: 0;
margin: 0;
}
                
.header_image {
display: inline;
}

In IE the images align correctly. In Firefox using the first method
the 2nd image actually appears in the "line" below the first because
of the width of the header container. Remove the carriage-returns and
in Firefox they align perfectly.

Does anyone know why it is including the carriage-returns and how to
avoid it? Perhaps via CSS. I'm using Homesite and saving the file in
the Unix file format, but it doesn't make a difference.

Best regards,

Richard Davey
-- 
 http://www.launchcode.co.uk - PHP Development Services
 "I am not young enough to know everything." - Oscar Wilde