Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 138
  • Last Modified:

font-size property not working in some browsers

I'm struggling with CSS on one element on this page:
http://www.herbeinwealth.com/news-room.asp

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?

Thanks!
1.jpg
0
bbdesign
Asked:
bbdesign
  • 3
  • 3
1 Solution
 
GaryCommented:
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.
0
 
bbdesignAuthor 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).
0
 
GaryCommented:
It is already smaller.
0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
bbdesignAuthor 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?
0
 
GaryCommented:
Try hard refreshing
0
 
bbdesignAuthor 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.
0

Featured Post

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

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

  • 3
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now