Opera - Letter-Spacing Rendering Quirk
The stylesheet is inline.
The letter-spacing property in CSS1 sets the spacing between characters. Here is what the W3C has to say about letter-spacing:
There are no hard-set rules to define how this should work, as it should seem intuitive.
Here is an example of left-aligned text with a letter-spacing of 10px:
Here is an example of right-aligned text with a letter-spacing of 10px:
All good so far. Now, lets wrap the letter-spaced text in a new red div, and stick some normal text in the outer green div.
For non-Opera browsers, it looks like this:
The letter-spaced text spilled out of its div to the right, ran off the screen and no horizontal scroll bar appeared. Technically, as stated above it may be Opera's right to do this. It used an algorithm which puts the text's left edge at the point at which it would have been were it not letter-spaced. Compare:
By this reasoning, it may be considered a bug, and it also may be considered a UA decision. If it's the latter, its a very inconsistent one and not pretty either.
There are two known ways to fix this. It seems to be a simple matter of badly parsed white-space. Let's look at the offending code:
First, insert a line-break tag (<br />) after the normal text:
Or second, eliminate the line-break in the code between the normal text and the opening div tag which contains the spaced text.
ta-dah! by Micah Sittig in xhtml and css, last updated 2002.06.28