Opera: dotted border bug and workarounds

testpage for the "Operadotfix" and the painted dots

NB-1: This bug occurs anyway in Opera 7.54 and Opera 8.01, at resolution 1024x768.

NB-2: When viewing this page in Opera, set zoom at 100%! See note [3]

.box1 { border: 1px black dotted; }

This is a 1 line paragraph, showing the Opera dotted border bug. [1]

Same paragraph with Opera dotted border workaround: .operadotfix { margin-top: 1px; } [2]

[1] Enlarged screenshot Opera8:
[2] Enlarged screenshot Opera8:

This is a paragraph of 2 lines,
not showing the Opera dotted border bug.

This is a paragraph of 3 lines,
and here ...
not showing the Opera dotted border bug.

This is a paragraph of 4 lines,
and here ...
surprise ...
not showing the Opera dotted border bug.

.box2 { border: 2px black dotted; }

This is a 1 line paragraph, not showing the Opera dotted border bug.

This is a paragraph of 2 lines,
showing the Opera dotted border bug.

This is a paragraph of 2 lines,
showing the Opera dotted border workaround: .operadotfix { margin-top: 1px; }

This is a paragraph of 3 lines,
and here ...
not showing the Opera dotted border bug.

This is a paragraph of 4 lines,
and here ...
surprise ...
showing the Opera dotted border bug again.

This is a paragraph of 4 lines,
and here ...
surprise ...
showing the Opera dotted border workaround: .operadotfix { margin-top: 1px; }

.box3 { border: 3px black dotted; }

This is a 1 line paragraph, not showing the Opera dotted border bug.

This is a paragraph of 2 lines,
showing the Opera dotted border bug: too close!

This is a paragraph of 2 lines,
showing the Opera dotted border workaround: .operadotfix { margin-top: 1px; }

.box4 { border: 4px black dotted; }

This is a 1 line paragraph, now showing the Opera dotted border bug in the horizontal borders!

This is a 1 line paragraph, repaired with Opera dotted border workaround: .operadotfix2 { width: 96.5%; }

This is a paragraph of 2 lines,
showing the Opera dotted border bug: horizontally too close! - And so on...

Conclusions

Apparently Opera's dotted border bug is connected to the computed format of the dotted container.

A workaround for vertical space-positioning of the dots can be: adding a small margin (or padding).

Though, there is no general rule: occurring of the bug is "at random". And application of the "operadotfix" seems to be as well depending of the amount of lines, the line-height, and inside margins and paddings of the container ... and: screen resolution ...

For the horizontal dots is good spacing even more difficult: somehow the width of the container has to be re-defined.
See also Chris Hester's testpage, and his bug-report in Quirksmode.

Looks like an universal css-fix for Opera doesn't exist.

I think the only general workaround for Opera is using a repeated background-img around the container.

Solution: painting the dots

This is a container with painted 1px dots, positioned around / in the box as background-images.
See source code.

Working Opera workaround! [3]

Extra advantages:

There can be chosen in the background-color of the dots: the inside color of the box (dots in the box), or the color of the background around the box (dots around the box). Otherwise it is dependent of what browser is used. And: 2 or more color dots are possible too ().
The space between the dots can be adapted, other figures are possible ().
Also workaround for Internet Explorer bug: now showing real 1px dots, instead of a dashed line.

Disadvantage:

No pure css-solution, extra <div>'s in the html have to be implemented.

This is a container with painted 2px dots.

francky kleyneman, 10 apr. 2006

francky home

[3]
As far as Opera can handle. This means: it is working at normal font-size (zoom 100%) in the Opera-settings. When enlarging the zoom-% in Opera /* the good right of the web page visitor! */ the Opera rendering of small images is ... let's say not the top of beauty.

Real size screenshot Opera8, zoomed 120% (in Opera: view this with zoom 100%):