3 px float bug IE6

hey, i have 3 floats element, they've 6 px space (3px each), how can i fix it without add another CSS or use "if ie6.."?

.option1 {
    width:256px;
    float:right;
	margin-right:27px;
	display:inline;
    }
	
.option2 {
    width:309px;
    float:right;
    }
	
.option3 {
    width:170px;
    float:right;
    }

PHP:

and the HTML:

    <div class="option1">
        <div class="option_right"></div>
        <div class="option_middle">SOME TEXT YOU KNOW</div>
        <div class="option_left"></div>
	</div>
	
    <div class="option2">
        <div class="option_right"></div>
        <div class="option_middle">SOME TEXT YOU KNOW - 2</div>
        <div class="option_left"></div>
	</div>
	
    <div class="option3">
        <div class="option_right"></div>
        <div class="option_middle">SOME TEXT YOU KNOW - 3</div>
        <div class="option_left"></div>
	</div>

PHP:

option_left/middle/left dont metter here.

Thank you!

 

You can't.

 

I have had tons of problems with the float of elements...I have problems with padding also...it is a nightmare because I use firefox predominantly and IE6 and other versions suck...

 

One good thing about this bug is that you learn plenty about CSS hacks and tricks

If this doesn't work then you may have no choice:
CSSPlay - IE6 3px Bug Fix

BTW, I got it from this huge collection of IE6 fixes:
Ultimate IE6 Cheatsheet

 

What makes you (the OP) think you have the 3px text jog bug? This code does not cause that bug, and a pragmatic test shows that the bug is not evident.

To see this bug in glorious color, modify the code as follows:

  .option1 {
    width:256px;
    float:right;
    margin-right:27px;
    display:inline;
    }
   
  .option2 {
    width:309px;
    float:left;
    }
   
  .option3 {
    margin-left: 309px;
    margin-right: 256px;
    }
====================
  <div class="option1">
    <div class="option_right"></div>

    <div class="option_middle">
      SOME TEXT YOU KNOW
    </div>

    <div class="option_left"></div>
  </div>

  <div class="option2">
    <div class="option_right"></div>

    <div class="option_middle">
      SOME TEXT YOU KNOW - 2
    </div>

    <div class="option_left"></div>
  </div>

  <div class="option3">
    <div class="option_right"></div>

    <div class="option_middle">
      xxx SOME TEXT YOU KNOW - 3
      <br />
      xxx another line of text
    </div>

    <div class="option_left"></div>
  </div>

Code (markup):

Please describe what you see that you don't want. Since your code renders as it should, I cannot know what you want it to do.

cheers,

gary