Series: Mixed tensor

A quest to get a superscript to render directly over a subscript with CSS.

CSS Rendering Issues

This entry is part 1 of 3 in the series Mixed tensor

I’m having some rendering issues in Opera and MSIE.

I want to include currency and version information at the end of poem titles. I’ve decided to print a superscript current draft asterisk directly above a subscript version number.

I’ve attempted various methods, such as negative left margins to move the superscript over the top of the subscript, but the best looking was to enclose the <sub> and <sup> in a <span> and float:left the <sup>.

As can be seen in the screenshots below, it renders as I expected it to in WebKit and Gekco browsers, but not in Opera or IE. Opera inserts a horizontal space between the superscript and subscript. MSIE places the superscript below the subscript.

I don’t have a Windows machine, so no IE, and browsershots.org has yet to give me a grab; I have to rely friends to send me screenshots, so working on an IE solution is slow going. …Read on for screenshots and the code I’m working with.

A loss for words

This entry is part 2 of 3 in the series Mixed tensor

Knowing that my task would be easier if I had the words I went on a quest to find the name for setting a superscript directly above a subscript Example. The closest I came was Mixed Tensor, which is, like, a math thing.
I’ve searched typographic sites, and linguistic sites, a reverse dictionary.

And I gave up.

Narrowing in

This entry is part 3 of 3 in the series Mixed tensor

I trimmed down the code for y’all. Here is the most minimal parts of it. How can I make this work in Opera? (yes, and maybe even IE). By work in Opera I mean render like it does in Webkit and Gecko, like so:
Example rendered in Safari

Apparently the magic that allows this to work is the css height: 0; declaration. I’m not sure why that is, but it gives me the chills (and probably nightmares entitled Box Model).

[crayon lang=”html”]

Title

5
*

[/crayon][crayon lang=”css”]
span.subdraft {
display: inline-block;
}
span.subdraft sup {
height: 0;
float: left;
}
[/crayon]

Or, if it’s easier, you can download a html file (css embedded).