Here's another annoying IE rendering issue: When rendering images inside of a <div> tag, if the image is just a single image the div or image will somehow throw in a few pixels of padding. Using standard XHTML 1.0 DocType the following markup generates a slight border between the

<div>

    <img src="images/MauiTouch-Logo.jpg" alt="MauiTouch Logo" border="0" />

</div>

<div class="banner">

    <div style="float:right;color: #ffcc00;padding-left:8px;" id="divSubTitle"><%= this.Subtitle %></div>

    <div style="color: khaki;float:left;padding-right:10px;" id="divSubhead">

       Touching Mind, Soul and Body

    </div>

</div>

This works just fine in FireFox, Safari and  Opera, but fails in IE. Here's what it looks like in IE:

At first I thought this might have something to do with margins or padding and so added margin: 0px and padding: 0px to the image container div, but that doesn't help either.

But the following does work and removes that same padding:

  <div><img src="images/MauiTouch-Logo.jpg" alt="MauiTouch Logo" border="0" /></div>

Simply removing all whitespace inside of the div tag renders the image and div correctly. The image and div tag next to each other without any spacing will make the image render properly, which is pretty damn lame. This doesn't seem to happen with other types of content - it appears this is specific to an image contained as the only content inside of a div tag.

Another and maybe cleaner way to do this without concern for spacing and if you know image height exactly is to load the image as a background:

<div style="background: url(images/MauiTouch-Logo.jpg);height: 140px;">

</div>

The correct result then is as you would expect the image butted up properly against the toolbar.

[updated from comments - 6/6/2008]

The not so obvious problem - as outlined by the commenters and referenced links below - is that the img tag renders by default as an inline element and IE's default causes the extra white space to be treated like new lines and hence some 'empty' space to be rendered. Other browsers don't appear to do this the same way.

The simple solution to this is to force the image to block display mode which also works to fix the above problem:

  <div>
        <img src="images/MauiTouch-Logo.jpg" alt="MauiTouch Logo" border="0" style="display: block;" />
  </div> 

Several people also suggested browser reset CSS style sheets which are a good idea to set standard formatting for all common elements which can resolve some of the differences between browsers. For example, a reset could force images to be always treated as block elements since inline images are rarely useful - in most cases you either want the image to render as a block or you'll using float to move it right or left and have content flow around it.

As always, thanks to the commenters who really 'made' this topic.