Take a look at this code and the bolded DIV in particular:
<html><body>
<style>
* { padding: 0px; margin: 0px; }
img { border-width: 0px; }
</style>
<div>
<img src="pic.gif" />
</div>
<div style="width: 285px; height: 100px; background-color: Green;">
<p>Other stuff</p>
</div>
</body></html>
This renders a lovely gap between the image in the top DIV and the bottom DIV:
Inspecting the DOM using the IE Developer Toolbar reveals IE is interpreting and rendering a spurious text node from the markup:
As you might expect, Firefox has no issues with this and renders the two DIVs one on top of the other with no gap between.
Despite average CSS skills, I was unable to style this into submission without completely mangling the existing code and CSS (simply adjusting the DIV's height had no effect); instead I managed to get around this by simply removing all whitespace between the opening and closing DIV tags:
<div><img src="pic.gif" /></div>
Since the image in this example is essentially functioning as background image for the DIV, I could have alternatively set its background-image to the URL of the image.
No comments:
Post a Comment
Spam comments will be deleted
Note: only a member of this blog may post a comment.