Accessibility

CSS Advisor

An Example of Three Pixel Jog

by Siddis on October 23, 2008
Edited by: sfegette on September 11, 2010
Avg Rating 4.4 (5)   |   Log in to rate post.

Tagged with Explorer 6.0 , Explorer 5.0 , Position , Explorer 7.0 , Text , Explorer 5.5 , Float

Problem

When anonymous line boxes (boxes that contain inline content) are adjacent to a float, a 3px gap appears... (From Dreamweaver)

Solution

Add the class described in the body of this post to the head of your document. Just a comment to your tree-pixel-jog solution, which works fine. Thank you.

Detailed description

Add the class like this (in the "head" section):

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

<style type="text/css">

    other styles

</style>

The "div" with the problem is coded like this:

<div class="mybuggyelement" id="mainPart"> ..... </div>

Look at http://lostablones.es/Links/links.html for the fix in action. Use "view source" if you like.

That's all.

 

 




Text ID: THREE_PIXEL_JOG_EXAMPLE



Comments (2)

To add a comment, please Log in.




It's a winner

I was creating a tabbed panel. I had to apply this hack to the class of my ul statement. After that it worked.

Works great!

This worked perfectly - thanks for sharing this solution!





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)