?
Solved

CSS for ®

Posted on 2006-11-07
7
Medium Priority
?
2,174 Views
Last Modified: 2013-12-03
Hello,

In the following example, "Registered Trademark®" the ® is the SAME SIZE at the other text.  I want ALL ® to be superscript (smaller and higher than regular text).

Can this be done STRICTLY with CSS?  Can I identify a font and size etc for just a character?
0
Comment
Question by:hankknight
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
7 Comments
 
LVL 30

Assisted Solution

by:callrs
callrs earned 200 total points
ID: 17891116
<style type="text/css">
span.reg {font-size: 75%; vertical-align: super;}
</style>
"Registered Trademark<span class=reg>&reg;</span> etc."


Someone else may have a better way...
0
 
LVL 30

Assisted Solution

by:Mark Steggles
Mark Steggles earned 200 total points
ID: 17891140
Greetings hankknight,

You could try putting the character inside a <span class="reg">&reg;</span>

CSS
.reg {
font-size:8px;
}

If you want it to be higher than usual position try something like this css

CSS
.reg {
font-size:8px;
display:inline-block;
margin-bottom:4px;
}

Regards
0
 
LVL 19

Accepted Solution

by:
VoteyDisciple earned 1400 total points
ID: 17891201
Unfortunately styles aren't of any use if the page isn't marked up correctly in the first place.  To get a symbol supserscript, it should be <sup>&reg;</sup> and no special styling will even be required.

If you have no control over the HTML I think you're out of luck on this one.
0
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
LVL 8

Assisted Solution

by:radnor
radnor earned 200 total points
ID: 17891305
<html>
<head>
<title>test</title>
<style>
.regtm {
      position: relative;
      top: -6px;
      font-size:11px;
}
</style>

</head>
<body>
Registered Trademark<span class='regtm'>&reg</span>

</body>
</html>
0
 
LVL 8

Expert Comment

by:radnor
ID: 17891337
<html>
<head>
<title>test</title>
<style>
.regtm {
      position: relative;
      top: -6px;
      font-size:11px;
}
</style>

</head>
<body>
Registered Trademark<span class='regtm'>&reg</span>

</body>
</html>
0
 
LVL 19

Expert Comment

by:VoteyDisciple
ID: 17891410
I don't get what this great aversion to the <sup> tag is.  d-:

The whole issue here is that the markup present doesn't allow the character to be styled, so when suggesting a change to the markup let's at least stick with the correct tag?  
0
 
LVL 16

Author Comment

by:hankknight
ID: 17892606
Thank you, everyone.

I think that VoteyDisciple is right-- <sup>&reg;</sup> is certainly the BEST way to do it.
The it could be further controlled like this:

                   sup {
                        position: relative;
                        top: -6px;
                        font-size:11px;
                        color:red;
                   }
I guess I was just hoping to get away with being lazy, cause I have about 75 html pages that have to be fixed...  But I might just have to do a mass find and replace to chage &reg; to <sup>&reg;</sup>
0

Featured Post

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
Excel styles will make formatting consistent and let you apply and change formatting faster. In this tutorial, you'll learn how to use Excel's built-in styles, how to modify styles, and how to create your own. You'll also learn how to use your custo…
If you’ve ever visited a web page and noticed a cool font that you really liked the look of, but couldn’t figure out which font it was so that you could use it for your own work, then this video is for you! In this Micro Tutorial, you'll learn yo…
Suggested Courses

649 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question