® not displaying properly in Safari

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: .5em;
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. Any ideas?

Hi,

Lose the ® at the end of the class as that’s not valid anyway.

If you want the ® exactly the same then you may have to set the size in px as it looks like Safari is setting 9px instead of 8px as expected.


.introheader { 
font-family: Verdana; 
[B]font-size: 8px; [/B]
line-height: 1.4em; 
font-weight: bold; 
color: #552C16; 
text-align: left; 
vertical-align: text-top; 
}

Or set the body to font-size:16px to start with and then the .5em will equate to 8px (but its never a good idea to set the body in px as that disregards the users preferences).

Hi Paul

The code is:

<p class=“introCopy2”>XX<strong>xxxx</strong>x Xxxx<span class=“introheaderreg”><sup>®</sup></span> is…

I have already gotten rid of the ® in the class name.

.introCopy2 {
font-family: Verdana;
font-size: 12px;
line-height: 1.6;
font-weight: normal;
color: #552C16;
text-align: left;
margin: 15px 15px 0px 0px;
padding-left: 15px;
}

.introheaderreg {
font-family: Verdana;
font-size: .5em;
line-height: 1em;
font-weight: bold;
color: #552C16;
text-align: left;
vertical-align: text-top;
}

My client specified the font size, and it’s pervasive in the site, so I am not anxious to change it now. She wants the ® much smaller than the font. Is there something specific to Safari that could be causing it to ignore the CSS? I’ve tried inline font size, pts, pxl, %s, ems… nothing seems to modify it. I’m probably missing something simple.

That code works in Safari for me (making the ® quite tiny), so perhaps there is something overriding it. We can’t really help unless we see an example tht demonstrates the problem. If you don’t want to link to the site, you could make up a test page at CodePen, including all the CSS you have.

[ot]

I thought it was legal to do that, going by this: http://mathiasbynens.be/notes/html5-id-class (Although, as Chris Coyier pointed out long ago, it can lead to problems.)[/ot]

Yes, your sample is a bit confusing.

  1. There is a BIG difference between (R) and TM, which I hope your client is aware of. TM most often applies to the logo image ( or treatment of text that makes it a unique mark) and (R) applies to the abstract word.

  2. let’s thing about how the brand name is placed in the HTML ( I assume it’s text and not some graphic logo to which you are trying to add a TM; if it is then really you should be altering the IMAGE in a graphic editor instead!!!)

  3. it a bad idea, brand wise, to try to HTML a logotype … that is to RELY on HTML treatment of content to DESIGN or RENDER a logotype… BUT IF YOU MUST dont use EM/ STRONG as those tags have semantic meaning.

test this code BY IT SELF in both browsers first.

<html>
	<head>
		<title></title>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<meta name="viewport" content="width=device-width">
		<style type="text/css">
.introCopy2 {
font-family: Verdana;
font-size: 12px;
line-height: 1.6;
font-weight: normal;
color: #552C16;
text-align: left;
margin: 15px 15px 0px 0px;
padding-left: 15px;
}

sup.reg {
font-size: .6em;
font-weight: bold;
color: #552C16;
position: relative;
top:-.3em;
}

</style>
	</head>
	<body>
<p class="introCopy2">XX<b>xxxx</b>x Xxxx<sup class='reg'>&reg;</sup>  is&#8230;
	</body>
</html>

if it works, we can reasonably assume you have a typo and some specificity issues at play.

for example adding the rule .introCopy2 sup { font-size: 2em} AT the end of my code sets the size of the (R) to twice the text around it because both rules have the same specificity.

Also check your Safari settings (preferences/advanced) as there is an option to set a minimum font-size and you may have set it to larger than you want that element to appear. If this is the case then there is nothing you can do about it as that is a user setting and changed individually on each computer. The setting is unchecked by default but your client may have set a minimum font-size of 10px or similar.

Paul nailed it- preferences! Which is why it wasn’t making any sense to me; I so wish I had realized that sooner, but I sincerely thank everyone who tried to assist!

And it is the (text) name of the brand, not the logo, it is applied to. The logo is an image anyway.

Many thanks everyone!