IE6: 1% is more than 1/100 body width?

Hi,

I ran into this very odd problem today.
I have a content div, which is 60% wide with 20% on each side. In the left
20% I want to float a menu. An example is at
http://dev.terrabulgaria.com/test.html
In FireFox 2.0 this works exactly as expected. Same in IE7, except for a
horizontal scrollbar at the bottom, which can be used to view just some
extra whitespace. But in IE6, there is a major problem. The contents div is
shown nicely in place, but the float is placed all the way to the right,
with a left margin of about 110%, though the width seems to be correct.
It seems to me, that IE6 thinks that a percent is much more than it actually
is.
I have a similar problem at http://dev.terrabulgaria.com/Over_Ons with a
right float which is placed inside the red bordered center div, which I want
to float in the right margin.

I temporarily solved this by placing an extra stylesheet inside <!--[if lte
IE 6]> -- load ie6hacks.css <![endif]-->, where ie6hacks.css basically
overrides some margins with smaller values, but clearly this is not really
what I want.
Is this a bug in IE6, and can I solve this somehow without resorting to
conditional CSS and the like?

Thank you very much

Kind regards

Michael.

Well bust mah britches and call me cheeky, on Fri, 10 Aug 2007 14:02:44
GMT Michael scribed:

> Hi,
>
> I ran into this very odd problem today.
> I have a content div, which is 60% wide with 20% on each side. In the
> left 20% I want to float a menu. An example is at
> http://dev.terrabulgaria.com/test.html
> In FireFox 2.0 this works exactly as expected. Same in IE7, except for
> a horizontal scrollbar at the bottom, which can be used to view just
> some extra whitespace. But in IE6, there is a major problem. The
> contents div is shown nicely in place, but the float is placed all the
> way to the right, with a left margin of about 110%, though the width
> seems to be correct. It seems to me, that IE6 thinks that a percent is
> much more than it actually is.
> I have a similar problem at http://dev.terrabulgaria.com/Over_Ons with
> a right float which is placed inside the red bordered center div,
> which I want to float in the right margin.
>
> I temporarily solved this by placing an extra stylesheet inside
> <!--[if lte IE 6]> -- load ie6hacks.css <![endif]-->, where
> ie6hacks.css basically overrides some margins with smaller values, but
> clearly this is not really what I want.
> Is this a bug in IE6, and can I solve this somehow without resorting
> to conditional CSS and the like?

A "sorta fix" would be to change margin-left:50% to padding-left:50%.

--
Neredbojias
Half lies are worth twice as much as whole lies.