Need a IE Bug CSS Float Fix

You apply the hack to whatever element is floated, so:

myfloateddiv{
float:left;
other:stuff;
}
* html myfloateddiv{
margin-right:-3px;
}

If it was floated right, your negative margin would be the left one.

so I would write something like this?

myfloateddiv{ 
float:left; 
#content
#floatright
} 
* html myfloateddiv{ 
margin-right:-3px; 
}

No, you replace myfloateddiv with the name of your div that is floated. You can't put #content etc. in your CSS like that.

my container is not floated, will this make a difference?

all my floated elements are being used in the content area

The hack you've outlined above is for floated elements. Find the floated element that's giving you trouble and apply the above hack to it replacing myfloateddiv with the name of your troublesome float (which in your case would probably be #leftnav).

still no luck

I tried every combination

* html leftnav{ 
margin-right:-3px; 
}

* html container{ 
margin-right:-3px; 
}

* html top{ 
margin-right:-3px; 
}

* html content{ 
margin-right:-3px; 
}

* html foota{ 
margin-right:-3px; 
}

tried these too

* html leftnav{ 
margin-right:-3px; 
}
* html content{ 
margin-right:-3px; 
}
* html container{ 
margin-right:-3px; 
}
* html floatright{ 
margin-right:-3px; 
}
* html floatright2{ 
margin-right:-3px; 
}
* html floatright3{ 
margin-right:-3px; 
}
* html floatleft{ 
margin-right:-3px; 
}
* html floatrightmenu{ 
margin-right:-3px; 
}
* html floatrighttop{ 
margin-right:-3px; 
}
* html floatrighttop2{ 
margin-right:-3px; 
}
* html floatrightmenu2{ 
margin-right:-3px; 
}

still no luck

Here is what the error looks like

In all those cases, you're missing the # from in front of your div name (or the . if it's a class instead of an ID).

Ok, I wish that would be the solution to my problems

still no luck with

* html #leftnav{margin-right:-3px}
* html #container{margin-right:-3px}
* html .floatleft{margin-right:-3px}
* html .floatright{margin-right:-3px}]
* html .floatrightmenu{margin-right:-3px}
* html .floatrightmenu2{margin-right:-3px}
* html .floatright2{margin-right:-3px}
* html .floatright3{margin-right:-3px}
* html .floattop{margin-right:-3px}
* html .floattop2{margin-right:-3px}
* html .hr{margin-right:-3px}
* html .hr2{margin-right:-3px}
* html hr{margin-right:-3px}
* html #content {margin-left:168px;height:auto}
}

Hey Tyssen

I think I have finally fixed the 3px problem

Check out the final page at [url]http://www.employsa.com.au/latestnews.html
[/url]

I used the following code in my TEMPLATE to fix the problem

<!--[if  lte IE 6]>
<style type="text/css">
#container {overflow-x: hidden;}
* html #leftnav{margin-right:-3px}
</style>
<![endif]-->

THANKS SO MUCH FOR POINTING ME IN THE RIGHT DIRECTION!!!!!!!!!!!

You know I used to live in Brisbane, Berry St Spring Hill

I'm glad you've got it sorted finally, although I can't see the changes you've made (certainly can't see the conditional comment in the code for the link above).

have another look

OK, gotchya. Did adding * html #leftnav{margin-right:-3px} to your main stylesheet not sort the problem out though (as only IE browsers will pick that up anyway)? Also, you may need to set your conditional statement for all versions of IE, not just IE6.

I think I might be ok, I will set for more versions of IE though

The versions are IE5, IE6, IE7 yeah?

<!--[if IE]> will target all versions of IE.

sweet thanks dude