Unwanted Padding in IE Image Rendering in div Tag - Rick Strahl's Web Log
This article by Rick Strahl describes the problem of Internet Explorer adding extra spacing below images and he offers a few solutions to fix the problem.
The fixes:
a) If the image and closing DIV tag are kept on the same line, the spacing will be fixed.
<div><img src="http://www.blogger.com/image.jpg"></div>
b) <img src="http://www.blogger.com/image.jpg" style="display: block;">
Tested this on 5/6/10 and it worked!
IE space below image? - Stack Overflow
describes using this property to fix IE's automatic buffer around images:
img {margin-bottom: 0;}
Note: the margin-bottom property defined in the stylesheet did not fix the IE problem I was seeing of extra space below an image inside of a DIV.
Another programmer recommends using the * to declare all elements with margin: 0; padding: 0; at the top of the stylesheet.
Another commenter wrote about why IE has this problem in the first place.
The theory goes that, since divs are containers for mixed content, meaning both textual content and other markup content, IE considers your line return as "significant content" when in reality it is merely an indentation standard that helps markup readability.
No comments:
Post a Comment
Only comments in English will be considered. Thank you!