Solved

CSS for ®

Posted on 2006-11-07
7
2,109 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
7 Comments
 
LVL 30

Assisted Solution

by:callrs
callrs earned 50 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:Steggs
Steggs earned 50 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 350 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
Gigs: Get Your Project Delivered by an Expert

Select from freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely and get projects done right.

 
LVL 8

Assisted Solution

by:radnor
radnor earned 50 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

Courses: Start Training Online With Pros, Today

Brush up on the basics or master the advanced techniques required to earn essential industry certifications, with Courses. Enroll in a course and start learning today. Training topics range from Android App Dev to the Xen Virtualization Platform.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
iOS 10 iPad Zoom and acroll 4 71
alert before form submission 6 40
Make navigation bar highlight the page you are on. 1 18
Checkout Page Input Field not aligned 1 21
Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
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.
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

786 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