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?

Share this post

Link to post
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

Share this post

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Create New...