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.

Post Information
Post Metadata
Key Value
Title CSS Rendering Issues
Date
Author
SeriesMixed tensor, part 1
Category Blog
Tagged , ,
Short URL http://j.mp/1f8CaYE
FeedbackLeave a comment
Share
Tip the blogger

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.

Post Information
Post Metadata
Key Value
Title A loss for words
Date
Author
SeriesMixed tensor, part 2
Category Blog
Tagged , ,
Short URL http://j.mp/1jD7qEg
FeedbackLeave a comment
Share
Tip the blogger

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).

Post Information
Post Metadata
Key Value
Title Narrowing in
Date
Author
SeriesMixed tensor, part 3
Category Blog
Tagged , , ,
Short URL http://j.mp/L0LYub
FeedbackLeave a comment
Share
Tip the blogger