Close Gaps Next to Floated Images in Internet Explorer

By: Zoe Gillenwater

Page 2 of 2

Set for printing

Previous

Luckily, we can make IE treat the paragraphs like blocks again, without making the gap return, by giving them "layout."

"hasLayout" is an IE-only property that makes certain IE bugs disappear and changes how elements are laid out and relate to each other. If you want to dig into how hasLayout works, read this excellent article by Ingo Chao, On having layout.

The Holly Hack, described in the article How To Attack An Internet Explorer (Win) Display Bug referenced earlier, is one way to give an element layout because it sets a dimension on the element. But the Holly Hack doesn't work here. Georg Sørtun had the answer again, though: use zoom instead. This is another IE-only property that induces layout, and if we set it to "1" it will not change the appearance of the text (if set to 2, it would zoom in to make the text twice as big, for instance). When it is applied to the paragraphs, they split apart again. With some padding added between them, they look like normal paragraphs once more (see Image 3). Modify your IE-only CSS to match the block below:

p {
display: inline;
zoom: 1;
padding: .5em 0;
}


Image 3

Although an h2 element, not just paragraphs, is also adjacent to the floated and cleared images, applying this fix to the paragraphs only was good enough in this case — IE is a mysterious browser! However, on real pages that are more complicated, you may need to apply the fix to all content that is adjacent to gap-inducing floats. Tinkering is always present when IE needs to be supported!

The only other thing we may want to tweak at this point is the spacing of the the headings in relationship to the paragraphs. Headings have default top and bottom margins. These margins are butting up against and adding to the padding we've applied to the paragraphs to space them out from one another. So, add these additional rules within the conditional comment:

h1 {
margin: .3em 0;
}
h2 {
margin: .5em 0;
}

Now the spaces between the headings and paragraphs are consistent with how they looked before.

There's one niggling side effect of this method. If you scroll down the page, you will see that the paragraph that is adjacent to the bottom of the second photo no longer wraps around that photo's bottom (see Image 4). This new gap cannot be prevented or fixed. However, it will occur much less frequently than the first gap, usually be smaller in size, and is generally easy to overlook, so this solution is best for most situations.


Image 4: Notice the gap beneath the second image that occurs because the text of an individual paragraph can no longer wrap around a float.

If, however, you have a very picky client who uses IE and cannot stand the gap underneath some images, there is another method that you can use, courtesy of Ingo Chao, another creative css-discuss member.

Go back to your XHTML file and remove the entire conditional comment — it's no longer needed. Instead, add the following class:

.fixgap {
float: right;
height: 0;
}

Then, add this line of HTML immediately before the second floated image:

<div class="fixgap"><!-- --></div>

Preview the file in IE. Both the gap above the text and below the photo will be gone.

You can add this empty div above every float-clear combination element. If you go with this method, keep in mind that you are adding unneeded bulk to your pages and that there's a chance (especially if your pages are maintained by someone else) that the empty divs could be accidentally removed down the road. For these reasons, the first method is recommended in most cases.

Summary

Recommended Fix

Add this rule to an IE-only style sheet:

p {
display: inline;
zoom: 1;
padding: .5em 0;
}

Also, adjust margins on any content adjacent to the paragraphs.

See the file IE_adjacent_float_gap_fix1.html.

Alternate Fix

Add this rule to the main style sheet:

.fixgap {
float: right;
height: 0;
}

Add this line of HTML immediately before the float-clear combination element:

<div class="fixgap"><!-- --></div>

See the file IE_adjacent_float_gap_fix2.html.

Thanks to Georg Sørtun, Ingo Chao, and Bruno Fassino for their creative fixes to yet another IE bug!

Approximate download size: 285k

Page 2 of 2 Previous 1 2


download
Download Support Files


Downloads are disabled during your trial period.


Keywords
CSS, cascading style sheets, stylesheets, Windows Internet Explorer, IE, float, floats, floated image, clear, gaps, bugs, hacks, hasLayout, zoom, inline