Focus

This is the blog for my web design, development and marketing company, Red Kite Creative. Mostly what I'll be writing about is work-related but anything is fair game. Read more about me here...


View Debbie Campbell's profile on LinkedIn

What I'm Reading



View my bookstore













Superscripting a registration mark

November 18th, 2007 by debbie campbell

When you insert a registration mark (®) into your HTML, it comes in pretty much right in the vertical middle of the line. It looks weird there, as many a client has pointed out to me. They’d like to see it superscripted and I agree that’s where it looks most appropriate.

So you might try superscripting it (®) but this presents another problem. It also inserts a little bit of extra space above the line that contains it, throwing off the line spacing if it’s tight.

How to have a nicely superscripted registration mark that doesn’t destroy the even spacing of text? Try this - works in FF, Netscape and Opera…

In your CSS file:

span.reg {
position: relative;
top: -3px;
font-size: 10px;
}

And in your (X)HTML:

®

Now in IE6 and 7, what I see when I implement this is that the mark looks fine until I touch the scrollbar - then it (and all the other marks with the same class) stays put on the page (like it’s fixed) while the rest of the content moves. It looks like IE6 and 7 don’t like ‘position: relative;’ in a span tag? I’m not sure. Looking for answers about this issue now.

Posted in CSS |

Leave a Comment

Please note: Comment moderation is enabled and may delay your comment a bit. Please stay on topic. If you submit spam or irrelevant comments, it will be deleted and your IP will be banned.