font-size property not working in some browsers

Posted on 2014-09-18
Medium Priority
Last Modified: 2014-09-18
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?

Question by:bbdesign
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
  • 3
  • 3
LVL 58

Accepted Solution

Gary earned 2000 total points
ID: 40330543
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.

Author Comment

ID: 40330621
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).
LVL 58

Expert Comment

ID: 40330643
It is already smaller.

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.


Author Comment

ID: 40330700
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?
LVL 58

Expert Comment

ID: 40330703
Try hard refreshing

Author Comment

ID: 40330744
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.

Featured Post

Enroll in August's Course of the Month

August's CompTIA IT Fundamentals course includes 19 hours of basic computer principle modules and prepares you for the certification exam. It's free for Premium Members, Team Accounts, and Qualified Experts!

Question has a verified solution.

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

When applying CSS to your HTML, there are many different ways to select which element(s) the CSS applies to.  Some of these selectors are more commonly known and used than others - Here are the more common ones: #X - Matches an ID of X .X - Matche…
Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
In this Micro Tutorial users will learn how to embed custom fonts into websites using @font-face in CSS Select a font: Ensure the EULA allows you to use @font-face: Download the font: Get the browser-compatible files you need: Edit your CSS       - Name …
In this tutorial viewers will learn how add a full-size background image to a webpage using CSS3. Create a new HTML document with an internal stylesheet.: In CSS, define the html element to have a background image. Use a high resolution image.: In t…
Suggested Courses
Course of the Month13 days, 23 hours left to enroll

801 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