IE Blank Space after IMG tag - Fix
There has been an issue that is bothering me for quite a while now. Whenever I place an image in my HTML and start the text just after it, it shows blank spaces in IE. Firefox never renders a blank space unless   tag is displayed. IE (all version before 8) shows a blank space. I don't know why! This is the reason why I hate IE from the bottom of my core!
Anyway, I tried everything, but it keeps coming back. I tried to align the image towards the direction in which it shows space, but no use. Here is the screenshot of space that IE shows. There is an IMG tag and next starts a div with repeated background defined via CSS.
Here is screenshot of how Firefox (correctly) displays the design.
The fix is that you have to remove all the white space from the code, see the image below (click it, thumbnail is very poor quality). Notice the selected area in the code below.
This is how it should look like. In short don't let dreamwaver autoformat your code, as IE (dumbass) will take it as blank space
Coded Example:
<img></img>
<div>></div>
it should be like,
<img></img><div>></div>
I hope Microsoft discontinues its products, especially the INTERNET EXPLORER! :)
5 comments:
hi there!
i found your article while i finding css hacks for IE:)
if you use that code, your problem will solve.
.ie-img-fix img{
margin:0;
padding:0;
border:0;
}
IE, puts unneccesary borders margins and paddings to elements everytime.
Also these codes are very important for IE mistakes. use them in every page.
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, blockquote, pre,
a, abbr, acronym, address, code,
del, dfn, em, img, q, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100.01%;
font-family: inherit;
vertical-align: baseline;
}
body {
line-height: 1.5;
}
/* Tables still need 'cellspacing="0"' in the markup. */
table { border-collapse: separate; border-spacing: 0; }
caption, th, td { text-align: left; font-weight: normal; }
table, td, th { vertical-align: middle; }
blockquote:before, blockquote:after, q:before, q:after { content: ""; }
blockquote, q { quotes: "" ""; }
a img { border: none;
Thank u very much. Problem solved by removing whitespace.
A hint in this post
http://www.highdots.com/forums/cascading-style-sheets/unexpected-whitespace-following-img-tag-268827.html
gives a CSS-only answer to this one.
IE creates a linebox for whitespace that follows the img tag, and it leaves space for the descenders of p's and y's and so on. The base of the image is aligned by default with the base of normal letters, a's and c's.
In order to get the space to disappear, just change the vertical-align property of the img to "bottom" - this will sit it flush with the bottom of the descenders, and there will be no gap underneath.
Thank you so much! I was having this problem on a site I was designing for a client, and your posting totally answered it for me. Good to know about that, and I really don't like IE... ;p
Exelent article Nadir, it solved my problem, but I noticed this only works in combination with applying an class with: "display: block" on the img tag. This is how it works on my IE6...
Post a Comment