hasLayout.net

Share |

Border Chaos Bug

Affected Versions

This bug affects: IE6

Symptoms

borders displayed chaotically; e.g. drawn where not should be or missing

Date of the Tutorial

Sun Jul 19 16:22:53 2009

Description

Here's a bug that may manifest itself in many different situations:

Demo

Due to the nature of the bug, the demo is shown on a separate page.

HTML Code:
<div id="wrapper">
    <div id="one">
      foo
    </div>
    <div>foo bar</div>
    <div id="two">
      bar
    </div>
</div>
CSS Code:
#wrapper {
    border: 3px solid #000;
}
#one {
    border: 1px solid #0f0;
}
#two {
    border: 1px solid #00f;
    margin-top: -1px;
}

There are many different combinations for this bug. In our demo negative margin on #two is the trigger for the bug - border from #wrapper "leaks out" above <div> #two.

Solutions

Below are solutions for the above bug ordered by the solution type.

Solution (Layout Solution)

Date of the Solution

Sun Jul 19 16:40:16 2009

Fixed Versions

all of the affected

Description

This is one of the many "layout" bugs; let's glance at the fixed demo:

Due to the nature of the bug, fixed demo is shown on a separate page.

HTML Code:
<div id="wrapper">
    <div id="one">
      foo
    </div>
    <div>foo bar</div>
    <div id="two">
      bar
    </div>
</div>
CSS Code:
#wrapper {
    border: 3px solid #000;
}
#one {
    border: 1px solid #0f0;
}
#two {
    border: 1px solid #00f;
    margin-top: -1px;
}
Conditional Comments:
<!--[if lte IE 6]>
    <style type="text/css">
        #wrapper {
            zoom: 1;
        }
    </style>
<![endif]-->

All we did here is gave "layout" to the parent element - #wrapper. As I've said, this bug manifests itself in many different forms, try to figure out which element(s) need(s) "layout".

Comments

Create new comment

  • Rob

    Wed Jun 23 02:12:45 2010

    I'm a bit confused here by the solution. Both examples look the same and so does the CSS. Sorry, not following.

    I'm wondering if this might be a solution to my own CSS border problem. I have a CSS test website and in IE Version 8, the borders show up...in earlier versions of IE (7, 6, 5, 4,) the borders never show up even though the border is declared.

    Here's a link. NOTE: I've only included these styles as inline because I've been giving this link to developer friends of mine---less step of having to download a CSS style sheet. But yes, I always have an external CSS style sheet, but for this purpose it was easier.

    http://robstathem.com/test/about.html

    Thanks,
    Rob

If you found materials on this site useful, please consider donating a few bucks to the author. Thank you.

Alternatively, purchase my book: