Contact   •   Products   •   Search

Rick Strahl's Web Log

Wind, waves, code and everything in between...
ASP.NET • C# • HTML5 • JavaScript • AngularJs

Unwanted Padding in IE Image Rendering in div Tag


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:

IESpacing

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.

IEFixedImage

[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.

Make Donation
Posted in CSS  HTML  


Feedback for this Post

 
# re: Unwanted Padding in IE Image Rendering in div Tag
by Attie June 05, 2008 @ 8:26am
Hi Rick,

Check out this link:

http://perishablepress.com/press/2007/10/23/a-killer-collection-of-global-css-reset-styles/

Get yourself a CSS style resetter, works awesome.
# re: Unwanted Padding in IE Image Rendering in div Tag
by John Pennington June 05, 2008 @ 8:37am
Hey Rick, I'm surprised this one hasn't bitten you earlier. From my experience, the cause of this issue is the line return between inline content (img element) and its container (the closing tag of the div element). Any other whitespace should not be contributing to this issue.

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. It is curious that IE makes this consideration at the end of contained content, but not at the beginning.

This markup should render without the unwanted padding:

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


I think if you tested this using other html container element constructs, you'll find the same (broken) behavior, i.e.:

<td>
     <img src="blah" /></td>

<span>
     <img src="blah" /></span>


...and on and on. Hey, at least they are consistent!

When you're crafting a pixel-precise layout, this one issue will kill you time and time again. It is so prevelant that I decided long ago to hand-write markup with an alternate indentation standard:

<a>
     text content<br />
     <b1 attribute="blah">
          <c>
                text content</c>
     <b2>text content</b2></a>


The point is this... alway close contained content on the same line as it's last element/text content. Not quite ideal, but markup is still readable. Your mileage may vary.

BTW... Where you at?! We miss you here at TechEd!
# re: Unwanted Padding in IE Image Rendering in div Tag
by Jesse Gavin June 05, 2008 @ 9:33am
I second Attie's notion of using a CSS reset. Since I started using them, 75% of my layout issues have gone away.
# re: Unwanted Padding in IE Image Rendering in div Tag
by Jon Galloway June 05, 2008 @ 10:04am
Another recommendation for style resets. Really helps start you with a common baseline and eliminates many browser-specific quirks. Not sure if it would help in this "significant line-break" issue, though.

Hey, at least this one's better than changing the display due to HTML comments (http://www.positioniseverything.net/explorer/dup-characters.html). That one had me chasing my tail for days.
# re: Unwanted Padding in IE Image Rendering in div Tag
by KoalaBear June 05, 2008 @ 1:56pm
I had some similar thing like this for menu items in a table.

I used CSS
line-height: 0;
# re: Unwanted Padding in IE Image Rendering in div Tag
by Andrew Rea June 05, 2008 @ 2:56pm
couple of things. Another solution to that problem in the css style sheet is this:

img{
display:block;
}

When I do any site I always start with

*{
padding:0;
margin:0;
}

I know that this did not cause the problem but thought I would mention since other have. This way I get to set the padding or margin to the elements where I see fit, and disregard any system padding that might have previously been attached to elements.

cheers,

Andrew
# re: Unwanted Padding in IE Image Rendering in div Tag
by Sam June 05, 2008 @ 4:38pm
This post and the comments are really interesting. I didn't know about CSS resetters. I too had this problem, or something like it. I don't want to devote all of my time to IE 6, though :)
# re: Unwanted Padding in IE Image Rendering in div Tag
by John S. June 05, 2008 @ 6:59pm
Can anyone here confirm that a CSS reset actually solves the issue described in the post? I haven't found that to be true.

I just ran into this week and I always forget what the solution is too. Very annoying. I wonder if IE8 has this problem. Anyone have it installed that can check?
# re: Unwanted Padding in IE Image Rendering in div Tag
by Travis June 05, 2008 @ 8:18pm
Actually, since images are display:inline by default, it only makes sense to render that white-space. Setting that image to display:block in your CSS will fix it.
# re: Unwanted Padding in IE Image Rendering in div Tag
by Josh Stodola June 05, 2008 @ 9:03pm
Yep, it's due to the inline display, and a CSS reset will NOT fix it. Same thing happens when you try to do horizontal unordered lists (<ul> and <li> tags) by setting the list item to display:inline. You will get whitespace to the right of each list item. You can fix it in a similiar fashion by removing all the whitespace from the markup, but that's an idiotic fix. The best solution is to use float:left instead of display:inline. In your case with the image, the best solution is to use display:block.

Regards...
# re: Unwanted Padding in IE Image Rendering in div Tag
by Giles Hinton June 06, 2008 @ 7:23am
Anybody tried using the white-space:nowrap; on the containing div to see if that would fix it - just a thought... I've used that to stop my images wrapping in the past.
# re: Unwanted Padding in IE Image Rendering in div Tag
by Joe Chung June 07, 2008 @ 4:04pm
+1 on Josh's suggestion to set the img's display to block. See http://www.quirksmode.org/css/quirksmode.html and scroll down to "img display" for an explanation of what's happening.
# re: Unwanted Padding in IE Image Rendering in div Tag
by Marco von Frieling June 10, 2008 @ 6:57am
Hi Rick!

We have the same problem again and again and not only with IE. The only way to fix it is what what John Pennington said. Maybe in IE other solutions may work, but in email clients like Lotus Notes etc. this seems to be the only way.
# re: Unwanted Padding in IE Image Rendering in div Tag
by Fitz June 10, 2008 @ 5:30pm
Are those two GUYS holding hands in the "M" in "Maui"?
# re: Unwanted Padding in IE Image Rendering in div Tag
by Amy July 08, 2008 @ 4:21pm
Oh my goodness, thank you SO much!!!

You really have no idea how much this has helped me.

I've been facing this problem for as long as I can remember being in HTML and CSS, and I hated always having to fix this by shoving all my HTML tags together! It just looks so untidy that way.

I never thought to put "img {display: block;}" in my CSS -- really, you're a lifesaver. =D

Thanks again!!
# re: Unwanted Padding in IE Image Rendering in div Tag
by Mike Nolan November 12, 2008 @ 3:21pm
Just solved a similar problem with two images in consecutive div tags.

IE appears to put 4px of white space between div tags so I just set the margin-top: -4px; in my css for that div - problem solved!
# re: Unwanted Padding in IE Image Rendering in div Tag
by Teo March 28, 2009 @ 5:41pm
Thank you very much. It really helped me !!!
# re: Unwanted Padding in IE Image Rendering in div Tag
by Juanca. June 09, 2009 @ 1:40am
Thank you so so so so much!!!!

I was crazy searching for this fix.

Thanks! Greatings from Spain!!
# re: Unwanted Padding in IE Image Rendering in div Tag
by Parag June 26, 2009 @ 4:05am
coooooooooool......

thanks a lot for the solution [:)]
Adding display:block; worked....

<div><img src="adv_imgs/main_cntboxtop.jpg" style="padding:0px; margin:0px; display:block; " />

thank u so much for the solution once again :)
# re: Unwanted Padding in IE Image Rendering in div Tag
by dGo November 12, 2009 @ 3:21am
thanks a lot...
This bug was a nightmare !!

solved now !

bloody IE8
when are those people gonna stick to W3 standards ?
# re: Unwanted Padding in IE Image Rendering in div Tag
by Patrick December 01, 2009 @ 7:39am
Hi - Thanks for this potentially very helpful article but it didn't actually help me even though I seem to be suffering from a very similar problem. Essentially I have 3 areas in the header region:
i) A header which is made up of three separate images each of which has some associated text placed immediately below it. These sub-divs are displayed side by side (floated left) and are arranged so that each is in the centre of its own sub-div: image/text (20% width) + image/text (60%) and then image/text (20%).
ii) I one pixel high flash (.swf) image which is just a little light glint running across the screen from left to right
iii) A navigation bar.

These three elements should be snuggly fitted together but I was getting the space described above between the header block and the swf image. I tried all of the above (border, display inline etc on both the header images and the swf 'object') and nothing shifted it until I took the swf image out then the problem disappeared? This only on IE8, FF & Safari where fine with my CSS?
# re: Unwanted Padding in IE Image Rendering in div Tag
by Rick Strahl December 01, 2009 @ 11:33am
@Patrick - Flash elements have their own behavior in a document, so that can screw things up. But you should wrap the Flash element into a <div> tag and then apply styling as you need to the <div>. That SHOULD work and provide the desired results.
# re: Unwanted Padding in IE Image Rendering in div Tag
by Daniel December 25, 2009 @ 7:34am
Thanks so much for posting this. I was going crazy.
# re: Unwanted Padding in IE Image Rendering in div Tag
by John Clark April 19, 2010 @ 2:34am
IE 8

and other microsoft improvements!

I have spent hours looking for a bug in my code, css sheets etc,
here is the resolved code

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>

</head>
<body style="position:absolute; left:0px; border:0px;">
<form id="form1" runat="server">

<div style="position:absolute; border:0px; left:0px; top:0px; width:1280px; height:680px; background-color:AntiqueWhite">
<div style="position:absolute; left:0px; top:0px; width:1280px; height:640px; background-color:AliceBlue;">
</div>
</div>


</form>
</body>
</html>

position: has no effect,
The browser does however show a neat 15px Border,
this can easily be removed,
border:-15px;
or left:-15px;
and top:-15px;

And this solves the problem, however some of my clients use ie7, firefox, etc and their browsers, display this with 15px missing.
Another feature after the mandatory 'automatic update' routine and the inevitable 'upgrade' to ie8, is that my clients and I assume a few others do not realise that only seeing half a site is a feature! If they want to see most of the site they are required to go to 'tools' compatibility view, and they have not read the ie8 manual to understand this, so the client is at fault!

I am joining a queue of people who are asking Santa for a big stick and a trip to Redmond, can no one stop this lunacy?
# re: Unwanted Padding in IE Image Rendering in div Tag
by Jason Rosenthal June 12, 2012 @ 1:44pm
Why all the hate for Redmond? They are following standards to the letter from IE 8.0+ in this case. The standard is confusing.

The post sure helped my understanding of the W3C beast.
 


West Wind  © Rick Strahl, West Wind Technologies, 2005 - 2014