Contact   •   Articles   •   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  

The Voices of Reason


 

Attie
June 05, 2008

# re: Unwanted Padding in IE Image Rendering in div Tag

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.

John Pennington
June 05, 2008

# re: Unwanted Padding in IE Image Rendering in div Tag

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!

Jesse Gavin
June 05, 2008

# re: Unwanted Padding in IE Image Rendering in div Tag

I second Attie's notion of using a CSS reset. Since I started using them, 75% of my layout issues have gone away.

Jon Galloway
June 05, 2008

# re: Unwanted Padding in IE Image Rendering in div Tag

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.

KoalaBear
June 05, 2008

# re: Unwanted Padding in IE Image Rendering in div Tag

I had some similar thing like this for menu items in a table.

I used CSS
line-height: 0;

Andrew Rea
June 05, 2008

# re: Unwanted Padding in IE Image Rendering in div Tag

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

Sam
June 05, 2008

# re: Unwanted Padding in IE Image Rendering in div Tag

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 :)

John S.
June 05, 2008

# re: Unwanted Padding in IE Image Rendering in div Tag

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?

Travis
June 05, 2008

# re: Unwanted Padding in IE Image Rendering in div Tag

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.

Josh Stodola
June 05, 2008

# re: Unwanted Padding in IE Image Rendering in div Tag

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

Giles Hinton
June 06, 2008

# re: Unwanted Padding in IE Image Rendering in div Tag

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.

Joe Chung
June 07, 2008

# re: Unwanted Padding in IE Image Rendering in div Tag

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

Marco von Frieling
June 10, 2008

# re: Unwanted Padding in IE Image Rendering in div Tag

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.

Fitz
June 10, 2008

# re: Unwanted Padding in IE Image Rendering in div Tag

Are those two GUYS holding hands in the "M" in "Maui"?

Amy
July 08, 2008

# re: Unwanted Padding in IE Image Rendering in div Tag

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!!

Mike Nolan
November 12, 2008

# re: Unwanted Padding in IE Image Rendering in div Tag

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!

Teo
March 28, 2009

# re: Unwanted Padding in IE Image Rendering in div Tag

Thank you very much. It really helped me !!!

Juanca.
June 09, 2009

# re: Unwanted Padding in IE Image Rendering in div Tag

Thank you so so so so much!!!!

I was crazy searching for this fix.

Thanks! Greatings from Spain!!

Parag
June 26, 2009

# re: Unwanted Padding in IE Image Rendering in div Tag

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 :)

dGo
November 12, 2009

# re: Unwanted Padding in IE Image Rendering in div Tag

thanks a lot...
This bug was a nightmare !!

solved now !

bloody IE8
when are those people gonna stick to W3 standards ?

Patrick
December 01, 2009

# re: Unwanted Padding in IE Image Rendering in div Tag

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?

Rick Strahl
December 01, 2009

# re: Unwanted Padding in IE Image Rendering in div Tag

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

Daniel
December 25, 2009

# re: Unwanted Padding in IE Image Rendering in div Tag

Thanks so much for posting this. I was going crazy.

John Clark
April 19, 2010

# re: Unwanted Padding in IE Image Rendering in div Tag

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?

Jason Rosenthal
June 12, 2012

# re: Unwanted Padding in IE Image Rendering in div Tag

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 - 2015