Jump to content

Getting ® to display properly in Safari


Recommended Posts

My client has changed her ™s to ®s, but wants the ® smaller than the font. I've tried it half a dozen ways, most of which work in Firefox and Chrome but do not work in Safari.

Right now it reads:

<span class="introheader®"><sup>®</sup></span> and .introheader® { font-family: Verdana; font-size: 5px; line-height: 1.4em; font-weight: bold; color: #552C16; text-align: left; vertical-align: text-top; } I've lost track of how many variations I have tried. Looks fine in DreamWeaver Live View, Firefox and Chrome, just not in Safari. Anyone else come across this?

Link to comment
Share on other sites

I would remove the symbol from the selector and class attribute so that your selector is just .introheader.


Also, remove <sup></sup> that you have wrapped around the symbol in the html.


Assuming you are using the Text in a Heading tag, here's the HTML:


<h1>My Product<span class="introheader">®</span></h1>



The CSS:


h1 {

font-family: Verdana, Helvetica, sans-serif;

font-size: 28px;



.introheader { font-size: 13px; vertical-align: 12px;}



I created a fiddle at http://jsfiddle.net/kelly2marie/47XtJ/

The vertical-align Property can be given any one of the following values:






etc etc...


Or use a value. That's what I did because I didn't like the look super had. It needed to go up higher just a bit so I went with 12px for the vertical alignment.


Give this a whirl.

Edited by kelly2marie
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Create New...