hasLayout.net

Bookmark and Share

Border Chaos Bug

Table of Contents

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

Currently there are no posted comments.

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

Alternatively, purchase my book: