1px dotted border in IE
One more flaw in IE is that it does not render 1px dotted borders. What you get from IE are 1px dashed borders. 2px dotted borders are fine, however. One solution is presented by Adam Kalsey but that does not work if you want a dotted border on all 4 sides. A little modification is all that is needed, and no css parsing bug hacks are necessary. First you need is a 2×2 px image where the top left and bottom right pixel is one color and the top right and bottom left pixel is a different color. Then wrap the element inside a div with the following class :
.wrap{
background-image: url(2x2pxl.gif);
background-repeat: repeat;
padding: 1px;
width: 250px;
}
set the width to whatever value is appropriate.
Then assign a background color to the element you want the dotted border on so the 2 by 2 pixel image doesn’t show through
#elementWithDottedBorder{
background-color: #FFFFFF;
}
Put it together like this …
<div class="wrap">
<div id="elementWithDottedBorder">
Bla bla bla
</div>
</div>
And you’re done!