Strange margin in IE6

views:

answers:

+3 Q:

Strange margin in IE6

Here is the code:

<html><head>
<style>
    *
    {
        margin: 0px;
        padding: 0px;
        border: 0px none;
    }
    #left
    {
        float: left;
        height: 90%;
        width: 100px;
        margin: 0px;
        padding: 0px;
        border: solid 1px Black;
    }
    #right
    {
        height: 90%;
        margin: 0px;
        padding: 0px;
        border: solid 1px Black;
    }
</style></head><body><div id="left">
    asdasd<br />
    asdasd<br />
    asdasd<br />
</div>
<div id="right">
    asdasd<br />
    asdasd<br />
    asdasd<br />
</div>

These 2 div in IE6 are separated by white column. In FireFox it's ok (divs aren't separated). Can you please give me some advice to fix this in IE6?

+4 A:

That's a known IE6 bug. It's best to read here: http://www.positioniseverything.net/explorer/threepxtest.html

A quick fix would be to float to the left both your divs (but it's not always applicable).

Alin Purcaru 2010-10-22 09:59:08

Thank you a lot. Applying "float:left" to both divs really helps.

timkishkin 2010-10-22 10:20:46

However, I'v read about this "3px ie bug" and solved the problem by applying "//margin-right: -3px;" to the left div. It works good.

timkishkin 2010-10-22 12:11:03

Well by using float you don't solve the bug, you just disable the reproduction conditions. The fix is indeed applying a negative 3px margin.

Alin Purcaru 2010-10-22 12:14:13

ansaurus

tags:

views:

answers:

Strange margin in IE6

related questions