Accessibility

CSS Advisor

Three-pixel text jog

by CSSAdvisorAdmin on October 31, 2006
Edited by: stefsull on April 28, 2013
Avg Rating 3.4 (23)   |   Log in to rate post.

Tagged with Explorer 6.0 , Explorer 5.0 , Explorer 5.5 , Float

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




Tagged with Explorer 6.0 , Explorer 5.0 , Explorer 5.5 , Float

Tag it on del.icio.us or Digg

Text ID: THREE_PIXEL_JOG



Comments (15)

To add a comment, please Log in.




This is how I used it

Give id or class to the affected tag (div or p, whatever). In my case it was <p> tag so I gave it id="threepixeltextjog" because I had one class already for it but not id.
Then used this in between <head> and </head? tags after all other CSS links and style tags.
<!--[if IE]><style type="text/css"> #threepixeltextjog { zoom: 1;}</style><![endif]-->
Problem gone!!!
If you want to see problem visually. Contain both the inline elements in two divs and zoom to 400-800% ad see that both the divs intersect each other by about 3 pixels even if you have perfect widths calculated. That is what 3 pixel jog in the direction of float means...

Not working

Hi can anyone help, I have tried this and I still have the 3 pixel text jog here is my code, help would be appreciated ;)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>1 Tribe Media Ltd</title>
<link href="1tribe_styles.css" rel="stylesheet" type="text/css" />

<!--[if IE 5]>
<style type="text/css">
/* place haslayout fix for IE 5* in this conditional comment */
#mainContent { height: 1%;
</style>
<![endif]-->

<!--[if IE]>
<style types="text/css">
/* place css fixes for all versions of IE in this conditional comment */
#mainContent { zoom: 1; }
/* the above proprietary zoom property gives IE the hasLayout it needs to avoid several bugs */
</style>
<![endif]-->

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

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

<script type="text/javascript">
<!--
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i )
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j ].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p 1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i ) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i ) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_nbGroup(event, grpName) { //v6.0
  var i,img,nbArr,args=MM_nbGroup.arguments;
  if (event == "init" && args.length > 2) {
    if ((img = MM_findObj(args[2])) != null && !img.MM_init) {
      img.MM_init = true; img.MM_up = args[3]; img.MM_dn = img.src;
      if ((nbArr = document[grpName]) == null) nbArr = document[grpName] = new Array();
      nbArr[nbArr.length] = img;
      for (i=4; i < args.length-1; i =2) if ((img = MM_findObj(args[i])) != null) {
        if (!img.MM_up) img.MM_up = img.src;
        img.src = img.MM_dn = args[i 1];
        nbArr[nbArr.length] = img;
    } }
  } else if (event == "over") {
    document.MM_nbOver = nbArr = new Array();
    for (i=1; i < args.length-1; i =3) if ((img = MM_findObj(args[i])) != null) {
      if (!img.MM_up) img.MM_up = img.src;
      img.src = (img.MM_dn && args[i 2]) ? args[i 2] : ((args[i 1])? args[i 1] : img.MM_up);
      nbArr[nbArr.length] = img;
    }
  } else if (event == "out" ) {
    for (i=0; i < document.MM_nbOver.length; i ) {
      img = document.MM_nbOver[i]; img.src = (img.MM_dn) ? img.MM_dn : img.MM_up; }
  } else if (event == "down") {
    nbArr = document[grpName];
    if (nbArr)
      for (i=0; i < nbArr.length; i ) { img=nbArr[i]; img.src = img.MM_up; img.MM_dn = 0; }
    document[grpName] = nbArr = new Array();
    for (i=2; i < args.length-1; i =2) if ((img = MM_findObj(args[i])) != null) {
      if (!img.MM_up) img.MM_up = img.src;
      img.src = img.MM_dn = (args[i 1])? args[i 1] : img.MM_up;
      nbArr[nbArr.length] = img;
  } }
}

//-->
</script>
</head>
<body onload="MM_preloadImages('assets/homedown1.jpg','assets/Film Button down.jpg','assets/Musicdown.jpg','assets/eventsdown.jpg','assets/Printdown.jpg','assets/Onlinedown.jpg','assets/contactdown.jpg')"><div id="container">
  <div id="header"><img src="assets/FRAZZLE LOGO-good .png" width="780" height="145" alt="1 Tribe Media" /></div>
  <div id="sidebar">
    <table border="0" cellpadding="0" cellspacing="0">
      <tr>
        <td><a href="index.html" target="_top" onclick="MM_nbGroup('down','group1','Home','',1)" onmouseover="MM_nbGroup('over','Home','assets/homedown1.jpg','',1)" onmouseout="MM_nbGroup('out')"><img src="assets/homeover1.jpg" alt="Home Page" name="Home" width="150" height="107" border="0" id="Home" onload="" /></a></td
      ></tr>
      <tr>
        <td><a href="Film/Film.html" target="_top" onclick="MM_nbGroup('down','group1','Film','',1)" onmouseover="MM_nbGroup('over','Film','assets/Film Button down.jpg','',1)" onmouseout="MM_nbGroup('out')"><img src="assets/Film Button over.jpg" alt="Film" name="Film" width="150" height="104" border="0" id="Film" onload="" /></a></td>
      </tr>
      <tr>
        <td><a href="Music/Music.html" target="_top" onclick="MM_nbGroup('down','group1','Music','',1)" onmouseover="MM_nbGroup('over','Music','assets/Musicdown.jpg','',1)" onmouseout="MM_nbGroup('out')"><img src="assets/Musicover.jpg" alt="Music" name="Music" width="150" height="83" border="0" id="Music" onload="" /></a></td>
      </tr>
      <tr>
        <td><a href="Events/Events.html" target="_top" onclick="MM_nbGroup('down','group1','Events','',1)" onmouseover="MM_nbGroup('over','Events','assets/eventsdown.jpg','',1)" onmouseout="MM_nbGroup('out')"><img src="assets/eventsover.jpg" alt="Events" name="Events" width="150" height="75" border="0" id="Events" onload="" /></a></td>
      </tr>
      <tr>
        <td><a href="Print/Print.html" target="_top" onclick="MM_nbGroup('down','group1','Print','',1)" onmouseover="MM_nbGroup('over','Print','assets/Printdown.jpg','',1)" onmouseout="MM_nbGroup('out')"><img src="assets/Printover.jpg" alt="Print" name="Print" width="150" height="91" border="0" id="Print" onload="" /></a></td>
      </tr>
      <tr>
        <td><a href="Online/Online.html" target="_top" onclick="MM_nbGroup('down','group1','Internet','',1)" onmouseover="MM_nbGroup('over','Internet','assets/Onlinedown.jpg','',1)" onmouseout="MM_nbGroup('out')"><img src="assets/Onlineover.jpg" alt="Internet" name="Internet" width="150" height="72" border="0" id="Internet" onload="" /></a></td>
      </tr>
      <tr>
        <td><a href="Contact/Contact.html" target="_top" onclick="MM_nbGroup('down','group1','Contact','',1)" onmouseover="MM_nbGroup('over','Contact','assets/contactdown.jpg','',1)" onmouseout="MM_nbGroup('out')"><img src="assets/contactover.jpg" alt="Contact us" name="Contact" width="150" height="77" border="0" id="Contact" onload="" /></a></td>
      </tr>
    </table>
  </div>
<div id="mainContent">
  <table width="600" border="0" cellpadding="0" cellspacing="0">
    <tr>
      <td width="234"><img src="assets/filmclapper.jpg" width="150" height="131" alt="Clapper Board" /></td>
      <td width="200"><img src="assets/lifebold.jpg" width="200" height="104" alt="life" /></td>
      <td width="200"><img src="assets/conference.png" width="150" height="131" alt="conference" /></td>
    </tr>
    <tr>
      <td><img src="assets/love.jpg" width="200" height="104" alt="love" /></td>
      <td><img src="assets/Guita1r.jpg" width="150" height="131" alt="Guitar" /></td>
      <td><img src="assets/free.jpg" width="200" height="104" alt="Free" /></td>
    </tr>
    <tr>
      <td><img src="assets/print.jpg" width="150" height="131" alt="Print" /></td>
      <td><img src="assets/truth.jpg" width="200" height="104" alt="true" /></td>
      <td><img src="assets/internet.jpg" width="150" height="131" alt="Internet" /></td>
    </tr>
    <tr>
      <td><img src="assets/joy.jpg" width="200" height="104" alt="joy" /></td>
      <td><img src="assets/phone.jpg" width="150" height="131" alt="Phone" /></td>
      <td><img src="assets/call.jpg" width="150" height="131" alt="Call" /></td>
    </tr>
    <tr>
      <td><img src="assets/eye.jpg" width="150" height="131" alt="Eye" /></td>
      <td><img src="assets/see.jpg" width="200" height="104" alt="See" /></td>
      <td><img src="assets/eagleseye.jpg" width="150" height="131" alt="Eagles Eye" /></td>
    </tr>
    </table>
</div>
  <div id="footer">
    <ul>
      <li><a href="#">Home</a> | </li>
      <li><a href="#">Film</a> | </li>
      <li><a href="#">Music</a> | </li>
      <li><a href="#">Events</a> | </li>
      <li><a href="#">Print</a> | </li>
      <li><a href="#">Internet</a> | </li>
      <li><a href="#">Contact</a> | </li>
    </ul>
  </div>
</div>
</body>
</html>

Salto de texto de tres pixeles

Identificar la ID que genera esa observación (en mi caso: #content). Agregar en Estilos CSS (de la referida Div) lo siguiente--> height auto . NOTA: otros datos del Estilo CSS de esa DIV eran: margin 0px; padding 0px.

Struggling Too

my error is occurring with a flash movie in my header.  I've added


<!--[if IE]>
<style type="text/css">
/* hide hack from Mac-IE5 \*/
* .thrColFixCtr #header { height: 1em; }
/* end hiding */
</style>
<![endif]-->

<!--[if IE]>
<style type="text/css">
/* place css fixes for all versions of IE in this conditional comment */
.thrColFixCtr #sidebar1, .thrColHybHdr #sidebar2 { padding-top: 30px; }
.thrColFixCtr #container { zoom: 1; padding-top: 15px; }
/* the above proprietary zoom property gives IE the hasLayout it needs to avoid several bugs */
</style>
<![endif]-->

in my header with no results.

Another issue has arisen in that when recreating the html with a different web host server,  none of the flash appears in the browser.

Help anyone?
Thanks.

i'm struggline

for some reason i'm struggling.  anybody wanna do a screen-share with me???  :)

good fix

insert the css rule before your head tag. rename the class (.mybuggyelement ) as needed and then apply the class to instances of divs containing bugging elements. works fine

Where does the zoom property go?

here is where I get the Three Pixel Text Jog error:

<div id="mainContent">

where should I insert the zoom property?

thanks.

confusion

Should the hack be in the header or the div tag? So far I agree with delirious19th: it don't work?!?

hack not working..

i'm not getting the 'zoom as an unspecified property' error but this hack still doesn't work. i would just use colencleaner's solution but i've already got several divs. eh. i'm sure after playing around with it some more i'll have it. i was just wondering if anyone else was having the same problem.

To clarify for the comments below:

@Brian - yes, you're correct. In fact, it SHOULD be applied to the container, not to the p elements inside. It is the container that will display the buggy behavior.

@macca63 - Internet Explorer Conditional Comments (IECC) are placed into the head of your document (syntax documented in the article above).

@colencleaner - the above syntax should work in the head of your page and should not give you a comment about the zoom property if done correctly. Perhaps if you open one of the CSS layouts in DW and look at the IECC there, you can see where your syntax may have gone wrong? (Most have an IECC with a zoom declared on the #mainContent div.)

HTH,
Stephanie Sullivan

got it

ok so i didn't use what was listed here but I got the error to go away. Not sure if it works fully. But I just created a div around the text that was getting all crazy. Kind of hard to explain but It no longer gives me the error :D

do what now?

Ok so I tried to apply the IECC hack and all I got was more errors saying that "Zoom" is an unsupported property. I tired 2 ways. The way specified above, I tried in my CSS and the head. Nothing. Can some on give us some better examples of how this is supposed to look?

where to put the code

Hi,
where do i have to put the code <!--[if IE]><style type="text/css"> .mybuggyelement { zoom: 1;}</style><![endif]-->

in the head tag or body tag?
Like to hear a comment

Macca

Additional note

An addition to my previous comment:

The reason for applying to the container and not the "p" tag is to allow right or left aligned images to flow normally and have the text wrap properly around them in IE.  If the fix is applied to the paragraph directly, any images within the text will not be wrapped as expected.

Can be applied to container

This fix can be applied to the container in a 2-column scenario rather than be applied to the paragraphs.  In the following scenario:

<div id="float">This is the left column floating</div>
<div id="main">This is the right column, not floating.

Your CSS can be applied to "main" which will fix all the paragraphs within main:

/* hide hack from Mac-IE5 \*/
* html #main { height: 1em; }
/* end hiding */





CSS Advisor home
Submit a post

rss

CSS ADVISOR RSS FEEDS
Recent: POSTS | COMMENTS | EDITS


Browsers
Internet Explorer (103)
Mozilla/Firefox (52)
Opera (18)
Safari (38)
CSS Properties
Background (25)
Border (10)
Color (10)
Float (23)
Font (6)
Margin (11)
Padding (9)
Position (40)
Text (30)
Width/Height (27)