hasLayout.net

IE7 1px Dotted Border Appears As Dashed Bug

Affected Versions

This bug affects: IE7

Symptoms

1 pixel dotted border appears as dashed when at least one of the border sides is styled of a width larger than 1px

Date of the Tutorial

Mon Aug 17 21:03:03 2009

Description

Thanks goes to Gérard Talbot for this bug. Microsoft claimed that this bug was fixed in IE7 in their changes summary. However, in IE7 part of this bug is still present. Let's take a look:

Demo

HTML Code:
<p>Lorem ...[plain text cut for brevity]... Curae;</p>
CSS Code:
p {
    border: 1px dotted #000;
    border-left-width: 4px;
}

While all the sane browsers will be displaying our ' element"><p> element with dotted border, in , the 1 pixel parts (i.e. all but the left border) will be dashed. This bug is triggered when at least one of the sides has border-width larger than 1px. The bug does not appear when border-width is set to larger than 1px on all sides, even if they are of different widths.

Solutions

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

Solution (Clean Markup Solution)

Date of the Solution

Mon Aug 17 21:03:20 2009

Fixed Versions

All of the affected

Description

If you can "afford" it, simply set border-width to more than 1px for parts where it is 1px. Alternatively, don't use dotted style or set the same width everywhere. If none of those solutions are feasible, let's have a look at the markup solution:

HTML Code:
<div>
    <p>Lorem ...[plain text cut for brevity]... Curae;</p>
</div>
CSS Code:
p {
    border: 1px dotted #000;
    border-left-width: 0;
}
div {
    border-left: 4px dotted #000;
}

What I did here is added an extra wrapper ' element"><div>. The left border on ' element"><p>, that was formerly styled as 4px width is now set to be of 0 width (the bug is not triggered this way). Then on the ' element"><div> I've set border-left to be 4px dotted #000 to create an illusion that the entire border around the box is on the same element.