1. Home
2. Developer Center
3. Dreamweaver Developer Center
4. CSS Advisor

CSS Advisor

Three-pixel text jog

Problem

When "line boxes"- invisible "anonymous" boxes that contain inline text, images, and anything else that is declared 'inline' - are adjacent to a float, a 3px margin appears between the line-box and the edge of the float. (The 3px margin disappears as soon as the content clears the float, causing a 3-pixel "text jog".)

Solution

Apply the Holly Hack or use the zoom property.

Detailed description

This issue was originally documented by Holly Bergevin and Big John Gallant on positioniseverything.net.

Fixing this 3-pixel text jog that's introduced when line boxes with inline elements are adjacent to a float in IE/Windows requires giving the paragraph an explicit dimension, which prevents IE/win from adding the 3px space. However, adding a dimension (width or height) also throws IE into a proprietary float model- and the element will act much like a float, displaying next to the real floated element, as opposed to letting the float overlap it.

The old (pre-IE7) solution for this bug, and several others, was the Holly Hack. However, the Holly Hack relies on buggy behavior that is no longer present in Internet Explorer 7 -- and using it can cause things to go a bit haywire. Instead, use an Internet Explorer Conditional Comment (IECC) after your CSS file in the head of the document to apply zoom: 1 to the line box in all versions of Internet Explorer. This will give the box the "layout" it needs to prevent the three-pixel gap, without throwing Internet Explorer into its proprietary float model.

<!--[if IE]>
<style type="text/css"> 
.mybuggyelement { zoom: 1;}
</style>
<![endif]-->

A class doesn't have to be used however. You can also use the affected ID or descendent selector, or even a group of selectors, that target the element itself. For instance, if the problematic elements were the #mainContent and #sidebar1 divs, you could use the following:

<!--[if IE]>
<style type="text/css"> 
#mainContent, #sidebar1 { zoom: 1;}
</style>
<![endif]-->

Text ID: THREE_PIXEL_JOG

---