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

[Michael]

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.

 

[Neredbojias]

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%.

 

[Michael]

in message

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


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

Well, if I'd even call it a fix it would be a very restrictive one at the
least.
Padding would create the white-space inside the box, which would not allow
me to set the border, nor the background-color.
Since I don't have IE6 on this computer (hooray for pre-installed Vista) I
can't test if padding instead of margin would work; I could use the
conditional CSS thing to make a borderless backgroundless padded version for
IE6 users and the "normal" good-looking version for everyone else. I'm not
thrilled at that idea though.

But thanks anyway for the suggestion.

Regards

Michael

 

[G]

Since I don't have IE6 on this computer

why?
http://tredosoft.com/Multiple_IE

 

[Michael]

why?
http://tredosoft.com/Multiple_IE

"The installer isn't working under Windows Vista. Mike posted a howto in the
comments for running IE6 in Vista."
Which comes down to : you just install a virtual machine that runs XP, and
you can install IE6 on *that*.
That's a little too much work, while I have access to a computer with IE6.

That was not the problem though

 

[Michael]

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.

Hmm, it looks like I needed
position: relative
to fix most of my problems.
Now I only need a few minor IE6 hacks and it's at least viewable.

Thanks.

Michael

 

[Martin Jay]

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.

Silly IE.

Perhaps you could look at the problem from a different viewpoint, and
float the menu to the right and not give it a left margin. You will
have to give it an outer DIV, though.

CSS:

..menu {
float: right;
border: solid 1px blue;
width: 50%;
}

HTML:

<div style="float: left;">
<div class="menu">
Testing
</div>
</div>