Solved

font-size property not working in some browsers

Posted on 2014-09-18
6
129 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
Courses: Start Training Online With Pros, Today

Brush up on the basics or master the advanced techniques required to earn essential industry certifications, with Courses. Enroll in a course and start learning today. Training topics range from Android App Dev to the Xen Virtualization Platform.

 

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

Gigs: Get Your Project Delivered by an Expert

Select from freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely and get projects done right.

Question has a verified solution.

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

Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer …
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this tutorial viewers will learn how to define a gradient in CSS. Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Gradient. Define the background as "linear-gradient(to right, #ee3668, black)". Ensure you …
In this Micro Tutorial viewers will learn how to create a CSS image sprite (In a later tutorial, viewers will learn how to use CSS and HTML to create a navigation menu using this sprite) Open a new Photoshop document with a width of (Icon width)x(N…

775 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