font-size property not working in some browsers

I'm struggling with CSS on one element on this page:

See attached. The text "THE BAM ALLIANCE" should be sized at 70% of "CARL RICHARDS". It works in Firefox, but not in Safari or Chrome. I even tried sticking a !important after the style, but does not work. The text size does not change, and results in a link break.

CSS on the element is like this:
span.credentials{font-size:70% !important;font-weight:normal;letter-spacing:0.2em;}

Open in new window

Is there something about my CSS that is making it not take the values in only certain browsers?

Brad BansnerWeb DeveloperAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

It looks about 70% but you cannot rely on browsers rendering fonts at the exact same pixel size, sometimes the font can be wider ergo the line break, saying that it looks the same to me in Chrome and FF with the exact same browser width, reducing the width causes the line break until the media query breaks in in both browsers.

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Brad BansnerWeb DeveloperAuthor Commented:
Basically what I want to know is, how can I make THE BAM ALLIANCE be in a smaller font than CARL RICHARDS? I thought I solved that with the <span> element (with its own CSS), but this only appears to work in Firefox (not Safari or Chrome).
It is already smaller.
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

Brad BansnerWeb DeveloperAuthor Commented:
But that's what I'm not seeing. In Safari and Chrome, THE BAM ALLIANCE doesn't appear to be any smaller than CARL RICHARDS. You are seeing otherwise?
Try hard refreshing
Brad BansnerWeb DeveloperAuthor Commented:
I think what I figured out is that my responsive CSS was affecting this. It was working at some screen sizes, but not others, and it was inconsistent across different browsers. For the smaller screen sizes, I tried substituting actual pixels for font-size. That seems to have worked by brute force. Not ideal, but its at least doing what I want now (I think).

Thanks for your help.
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.