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.

Screenshots

Example of my intended rendering on Safari on iOS.
My intended rendering as seen in Safari iOS
Additional space between and in Opera.
Opera introduces an extra horizontal space.

MSIE doesn't come close to what I want.
MSIE does the crazy.

Code

[crayon lang=”html”]

Greenhouse Christmas
6*

This experiment in POV and the sudden flipping thereof is a year old.

Posted on December 12, 2011 by asoulinprogress
1

[/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.

Leave a Reply