?
Solved

CSS in Firefox renders extra bold within <span> element

Posted on 2013-05-16
3
Medium Priority
?
547 Views
Last Modified: 2013-05-16
On this website:
http://partnersdesign.net

After five seconds, the intro slide goes away and a Javascript counter appears. It is inside this element:

<span id="cntdwn"></span>

I got the counter Javascript online from someone else, but as far as I can tell it shouldn't be applying any of its own styles.

In all browsers, it looks fine, but in Firefox it is extremely bold. I tried adding this extra CSS, to no avail:

span#cntdwn{color:#000;font-weight:normal;letter-spacing:0.05em;white-space:nowrap;}

If anyone could help me understand why this is happening, I would greatly appreciate it.

Thank you!
0
Comment
Question by:bbdesign
[X]
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
  • 2
3 Comments
 
LVL 83

Accepted Solution

by:
Dave Baldwin earned 2000 total points
ID: 39173278
Line 13 of the script is:

return "<b>" + s + "</b>";

Notice the Bold tags?  Since they are inline, they override the CSS.  It does the same thing in IE8, Firefox and Chrome.
0
 

Author Comment

by:bbdesign
ID: 39173448
Oh my, I can't believe I missed that. Thanks for checking!
0
 
LVL 83

Expert Comment

by:Dave Baldwin
ID: 39173485
You're welcome, glad to help.
0

Featured Post

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

Question has a verified solution.

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

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.
This article discusses four methods for overlaying images in a container on a web page
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 …
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
Suggested Courses
Course of the Month14 days, 1 hour 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