Solved

font-size property not working in some browsers

Posted on 2014-09-18
6
128 Views
Last Modified: 2014-09-18
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
Comment
Question by:bbdesign
  • 3
  • 3
6 Comments
 
LVL 58

Accepted Solution

by:
Gary earned 500 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.
0
 

Author Comment

by:bbdesign
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).
0
 
LVL 58

Expert Comment

by:Gary
ID: 40330643
It is already smaller.
0
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 

Author Comment

by:bbdesign
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?
0
 
LVL 58

Expert Comment

by:Gary
ID: 40330703
Try hard refreshing
0
 

Author Comment

by:bbdesign
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.
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Suggested Solutions

"I want to put my photos online, but I don't want them stolen.  What settings should I use?" When You Put Photos Online First and foremost, any digital file published on the WWW can be copied, stored, modified, retransmitted, etc.  Remember Naps…
SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…

914 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

Need Help in Real-Time?

Connect with top rated Experts

17 Experts available now in Live!

Get 1:1 Help Now