Issues styling ™ and ® entities

[nerodha]

I’m having issues with styling for trademark and registration entities (® and ™). For the most part throughout the site, I’ve been able to use this code:

<span class=”registered”>^®</span>
<span class=”trademark”>^™</span>

Along with this styling:

.trademark {
font-family: “Open Sans”, Arial, Helvetica, Verdana, sans-serif;
vertical-align: super;
font-size: smaller;
}

.registered {
vertical-align: super;
font-size: smaller;
}

However, in certain circumstances using <span class=”trademark”>^™</span> has resulted in various issues. As a workaround, I’ve had to copy and paste this (™) text instead, but the problem with this approach is that the font isn’t right, the size is too big, and it’s not superscripted enough over the regular text.

These are the areas of the site where I’m having issues (some of these are the same issue but just in a different place):

http://bluupixel.com/ion-microsite/
– Paragraph under “An app designed to simplify your life”: When I add <span class=”trademark”>^™</span> to the text, the entire paragraph disappears.
– Paragraph under “Do less. Get more done.”: Adding <span class=”trademark”>^™</span> makes the TM float to the right independently of the paragraph.

http://bluupixel.com/ion-microsite/security/
– Paragraph under “Guaranteed HIPAA compliant”: Adding <span class=”trademark”>^™</span> makes the TM float to the right independently of the paragraph.
– “NowSecure™ Certified” title: Adding <span class=”trademark”>^™</span> makes the title invisible.

http://bluupixel.com/ion-microsite/features/
– Paragraph under “Exciting features on the horizon”: Adding <span class=”trademark”>^™</span> makes the TM float to the right independently of the paragraph.

http://bluupixel.com/ion-microsite/faq/
– “What is iOn HEALING™ App?” question: Adding <span class=”trademark”>^™</span> makes the text invisible.
– Text under “What are the main functions of the app?” (“Place Orders”): Adding <span class=”registered”>^®</span> shifts the entire line down, out of alignment with the bullet.

* In general, everywhere a TM or (r) is added, it modifies the line-height and throws the line out of alignment with the rest of the paragraph.

* This isn’t theme-related but in case you know of a way around it, I can’t use <span class=”trademark”>^™</span> in the navigation text logo because WP won’t let me save code in the Site Title field.

Admin creds for the site are:

livemesh / pO%6GaqLS@dBtyL^atiZMUGi
http://bluupixel.com/ion-microsite/wp-admin

[nerodha]

Btw, the registration and trademark entities got converted to text in some of my code snippets; on the site, I’m actually using the &ENTITY; format.

[nerodha]

Another update – there is an htaccess password on the site that you’ll have to get through for which the creds are: acelity / ionhealing

Thanks

[Veena]

Instead of giving a separate span try to add sup div like below and see if it helps

™

[nerodha]

This didn’t have the desired effect. Using that code, I’m still seeing the issues described above. Any chance you could dig into the site with the admin creds provided above to give it a try hands-on? This is the last blocking change before I can call this project done.

[Veena]

Will get back to you on this shortly .

Thanks for your patience .

[nerodha]

Ok thanks.

[Veena]

If you give sup tag like this –

™

It should work ie, just give single inverted comma for class names instead of double quotes .

[nerodha]

Using the single quote instead of the double didn’t do it, but strangely this seemed to help solve at least a couple of the issues (no quotes):

<sup class=trademark>™</sup>

However, that didn’t help with most of the areas I was having problems with. The remaining issues are:

http://bluupixel.com/ion-microsite/

– Paragraph under “Do less. Get more done.”: Adding <span class=”trademark”>^™</span> makes the TM float to the right independently of the paragraph.

http://bluupixel.com/ion-microsite/security/

– Paragraph under “Guaranteed HIPAA compliant”: Adding <span class=”trademark”>^™</span> makes the TM float to the right independently of the paragraph.

http://bluupixel.com/ion-microsite/features/

– Paragraph under “Exciting features on the horizon”: Adding <span class=”trademark”>^™</span> makes the TM float to the right independently of the paragraph.

http://bluupixel.com/ion-microsite/faq/
– “What is iOn HEALING™ App?” question: Adding <span class=”trademark”>^™</span> makes the text invisible.

– Text under “What are the main functions of the app?” (“Place Orders”): Adding <span class=”registered”>^®</span> shifts the entire line down, out of alignment with the bullet.

– In general, everywhere a TM or (r) is added, it modifies the line-height and throws the line out of alignment with the rest of the paragraph.

– This isn’t theme-related but in case you know of a way around it, I can’t use <span class=”trademark”>^™</span> in the navigation text logo because WP won’t let me save code in the Site Title field.

[Author]

Posts