Unwanted Padding in IE Image Rendering – Css1 Clear and float

Published 04/01/2015 · Updated 04/12/2018

Unwanted Padding in IE Image Rendering

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.

This works just fine in FireFox, Safari and Opera, but fails in IE. Here’s what it looks like in IE:

This not so obvious problem 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. A good article about css display modes is here.

The simple solution to this is to force the image to block display mode which also works to fix the above problem:

Another way is to include a reset.css browser reset CSS style sheets which is 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.

Sample reset file

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

What does the CSS rule clear: both do?

.clear { clear: both; }

No floating elements allowed on the left or the right side of a specified html class or id selector tag.

Sample 1 : No floating elements allowed on the left or the right side of a specified <p> element:

Sample 1 : Turning off Float – Using Clear

Elements after the floating element will flow around it. To avoid this, use the clear property. The clear property specifies which sides of an element other floating elements are not allowed. Add a text line into the image gallery, using the clear property:

Post Views: 5,380