Why does Firefox render dashed borders misaligned from each other?

Question

http://betawww.helpcurenow.org/about/financial-accountability/

http://blog.helpcurenow.org/

I'm using a design that incorporates lots of 1px dashed borders. I noticed something odd in Firefox. Normally Firefox renders everything (*almost) as I would expect and want to see it. However with dashed borders, it appears when you use two dashed borders that are close to each other, they are misaligned.

What I mean is, I have several objects that have say a 1px bottom border, a 2px bottom margin, and then the next object has a 1px top border - basically creating the effect of a double border.

When viewing said effects in Safari, Chrome, and IE, the "double dashed border" effect looks great. However in Firefox, they dashed lines do not line up (no pun intended).

I'm sure it's just a glitch as to how Firefox renders dashed borders, but I wanted to get some insight as to why, if anybody knows.

You'll see the effect in my two URIs above. The first has a sidebar box where the heading uses this effect. The second (our blog) uses this effect all over, but most prominently you'll see with each post title, the byline below uses the effect also.

Answer 1

For the "why?" part of the question, there's a fairly simple explanation: the w3c doesn't define how to draw the border, so each browser writes their own independent implementation. Firefox's algorithm appears to render the border in a "circular" pattern:

------------------→
↑                 |
|                 |
|                 |
|                 |
|←----------------↓

You will notice that Internet Explorer doesn't draw the box the same as Opera/Chrome/Safari, either. There's a slight gap to the left of the border on both the top and the bottom (although this might be fixable with border-collapse).