Dotted top and bottom borders don’t line in Firefox

[rextherunt]

Hi all
I’d appreciate some help here. Has anyone experienced this and found a fix? I have a header styled with top and bottom dotted borders. In Firefox, the top and bottom edges don’t line up, but they do in Opera and Safari. The bottom one is slightly indented and starts with a full dot, ends on a half dot, while the top starts on a half dot and ends on a full dot.

.article-heading2 {

border-bottom: medium dotted #CCCCCC;

border-top: medium dotted #CCCCCC;

color: #6574BB;

font-size: 18px;

line-height: normal;

padding-bottom: 6px;

padding-top: 6px;

margin-top: 18px;

margin-right: 0px;

margin-bottom: 12px;

margin-left: 0px;

font-weight: bold;

}

I’m working on my local machine right now, so can’t post a link yet.
Thanks in advance!

[rextherunt]

Thanks for responding Eric. I’m using 7.01 on OSX 10.7
What am I doing wrong? It looks fine in the other browsers…

[rextherunt]

Yes, a shiny iMac.
But this thing is driving me nuts. The only way round I can think of is to use a bg image, but that seems crazy. Same thing happens on old PPC Mac with Firefox 3.6.23
Must be a mac thing.

[rextherunt]

I’m not sure I understand – could you give me an example?

[rextherunt]

hmm, but there are no divs, just one class.

[TheDoc]

The half dot/full dot thing is also a bug in Chrome – nothing you can do about that one.

[Author]

Posts