Odd Internet Explorer Rendering Bug (img tag)

Question

I have a page that has a a call like

<%# Databinder.Eval(Me, "Description") %>

where the description contains html that gets outputted on my site. It has worked fine for years, but now I am trying to add an img tag in the html, with a width of 740px, which fills the space nicely in lower resolutions.

It works fine in all browsers that I've checked it in (Chrome, FF, Safari) but ie8 adds a bunch of extra white space after the image which causes a horizontal scroll bar.

IE8's developer tool layout tab confirmed that the width of the div containing the img element was something like 1039px, so through inline css I was able to get it to the right size, but all other elements in the description field still have a width of 1039px. When I take the img tag out everything goes back to normal.

I've also made sure to set the img tag to display:block;

edit -- dummy code example:

<h1 class="asdf">asdf</h1>
<h2 class="zxcv">zxcv</h2>
<ul>
  <li>zxcv</li>
  <li>adsf</li>
  <li>asdf</li>
</ul> 
<h2 class="qwerty">qwerty</h2>
<p>qwerty</p>
<div style="margin:0; padding:0; width:740px; display:block;"><img style="margin:0; padding:0; width:740px; display:block;" src="images/asdf1.jpg" /></div>

So what am I missing?

Answer 1

In the example code posted the image tag is not closed, I don't know if this is because it is just dummy code or if that could be the issue. But if the image is just a spacer have you considered using a non breaking space instead?...

<div style="width:740px;">&nbsp;</div>

Will cause the space to be taken up by the blocking div element instead of placing an image element inside the div.

Answer 2

The example code you posted renders correctly in IE8. Can you post the actual code from your page, including CSS?