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.
Screenshots
Code
[crayon lang=”html”]
Greenhouse Christmas
6*
This experiment in POV and the sudden flipping thereof is a year old.
[/crayon]
[crayon lang=”css”]
span.dver {
text-decoration: none;
color: #808080;
font-style: normal;
font-family: Cochin, Palatino, Times, serif;
font-variant: normal;
font-weight: normal;
margin-left: .25ex;
display: inline-block;
}
span.dver sup, span.dver sub {
/* Do I need to explicitly state display: inline? */
font-size: inherit;
top: 0;
bottom: 0;
font-weight: normal;
font-style: normal;
text-decoration: none;
font-variant: normal;
}
span.dver sup {
vertical-align: super !important;
font-size: smaller;
float: left;
/* Do I need to clear that float? */
clear: both;
}
span.dver sub {
vertical-align: sub !important;
font-size: smaller;
}
span.dver.sdver, span.dver.nolink {
cursor: help;
}
span.dver.sdver sup {
float: none;
}
span.dver a:hover {
background-color: #e2e2e2;
}
span.dver a:active {
background-color: black;
color: yellow;
}
.current span.dver a:link {
color: #007f00;
}
.current span.dver a:visited {
color: #007f00;
}
[/crayon]
The relevant main theme CSS
[crayon lang=”css”]
/* Reset just about everything including */
sub, sup{
border: 0;
font-family: inherit;
font-size: 100%;
font-style: inherit;
font-weight: inherit;
margin: 0;
outline: 0;
padding: 0;
vertical-align: baseline;
}
sup, sub {
font-size: 10px;
height: 0;
line-height: 1;
position: relative;
vertical-align: baseline;
}
sup {
bottom: 1ex;
}
sub {
top: .5ex;
}
[/crayon]
I’m using a WordPress Twenty-Eleven 1.3 child theme so I had to override some of the CSS from the main theme.
The best page to see a live example is the Poems category, which includes new and old drafts with and without version numbers.
I replaced the code on the site. I am now setting the current draft marker inline with the version number. I’ll continue to look for a solution, but it’s no longer a priority.