Sidebar Sidebar
Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.

CSS Issue: Text Styling Works on Safari, Not in Firefox. Why?

razorianfly

razorianfly

macrumors 65816
Original poster
Oct 16, 2007
1,357
0
Cheshire, United Kingdom
Hi Guys.

I'm new to CSS and styling for different browsers, so with that in mind, here's my problem.

I have a countdown script which looks like this:

HTML:

Code: 
<font size="6" color="#aa4976" face="Verdana">
<center>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <meta name="description" content="" />
  <meta name="keywords" content="48, Hour, Sale, Worldwide" />
  <title>48 Hour Sale</title>
  <link rel="stylesheet" href="stylesheets/style.css" type="text/css" media="screen" />
  <link rel="shortcut icon" href="images/favicon.ico" />

</head>
<body class="winner">
  <div class="container">

    <div class="result">
	  <h1 id="value" class="val"></h2>
   </div>
  
    <div class="footer">
      <span></span><br/>
      <span><a href=""><img src="" alt="" /></a></span>
</body>

<script type="text/javascript">
	var count = 1036000;
	var step = 6;

	function split_thousands(s, sep) {
		if (s.length <= 10) return s;
		return split_thousands(s.substr(0, s.length - 3), sep) + sep + s.substr(s.length - 3, 4);
	}

	function counter() {
		count += Math.round(step * -0.1);
		document.getElementById("value").innerHTML = split_thousands(count+'', ",");
		setTimeout("counter()", 0);
	}
	
	counter();
</script>
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("");
pageTracker._trackPageview();
} catch(err) {}</script>

</html>
</center>
</font>

Which calls style.css which looks like this:

Code: 
{
	border: 0;
	margin: 0;
	padding: 0;
}
body{
	color: #a94a76;
	font: 50px Arial,Helvetica,Tahoma,Verdana,Sans-Serif;
}

In Safari, the Countdown is styled nicely:

1052k9c.png


In Firefox it looks like this (which doesn't particularly look nice):

ju7p5h.png


My question is: Why?

Any help is greatly appreciated.

Thanks again,
Arron
 
One big mistake I see right away. There should never be any code before the DOCTYPE. Also, script should be in the head or body tag.

In your CSS, change body to #value.
 
Is that your full web page? It would be very helpful if you could post the code for the whole page. If that is the whole page, then this may work for you:

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <meta name="description" content="" />
  <meta name="keywords" content="iPhone, Icon, Design, RFlyGD, 48, Hour, Sale, Worldwide" />
  <title>48 Hour Sale</title>
  <link rel="stylesheet" href="stylesheets/style.css" type="text/css" media="screen" />
  <link rel="shortcut icon" href="images/favicon.ico" />

</head>
<body class="winner">
  <div class="container">

	<font size="6" color="#aa4976" face="Verdana">
		<center>
	    <div class="result">
		  <h1 id="value" class="val"></h2>
	   </div>
   		</center>
	</font>
  
    <div class="footer">
      <span></span><br/>
      <span><a href=""><img src="" alt="" /></a></span>
</body>

<script type="text/javascript">
	var count = 1036000;
	var step = 6;

	function split_thousands(s, sep) {
		if (s.length <= 10) return s;
		return split_thousands(s.substr(0, s.length - 3), sep) + sep + s.substr(s.length - 3, 4);
	}

	function counter() {
		count += Math.round(step * -0.1);
		document.getElementById("value").innerHTML = split_thousands(count+'', ",");
		setTimeout("counter()", 0);
	}
	
	counter();
</script>
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("");
pageTracker._trackPageview();
} catch(err) {}</script>

</html>

Please note that I haven't tested it, so it may or may not work. Also, I only fixed the page. If I were you, I'd look into formatting the counter with CSS instead of using the font and center tags and I would put all of the scripts above the </body>...
 
Also, the <font> tag is deprecated. You shouldn't be using it with XHTML 1.0 strict. Font styling is supposed to be done in CSS.
 
^^ Ditto <center>.

Why don't you try validating your code? Often you can throw up errors in your code by doing that. Personally I find validating against HTML 5 (doctype: <!DOCTYPE HTML> is better as its more "common sense" than XHTML/HTML 4.

Note also that you'll need to force IE 8 to render in full standards mode if you validate as HTML 5 with the X-UA-Compatible tag.
 
Eraserhead said:
Personally I find validating against HTML 5 (doctype: <!DOCTYPE HTML> is better as its more "common sense" than XHTML/HTML 4.

Note also that you'll need to force IE 8 to render in full standards mode if you validate as HTML 5 with the X-UA-Compatible tag.
Click to expand...

Browsers don't fully support HTML5 and it's still in draft. I don't recommend use of that DOCTYPE currently, especially for someone new to web design as they won't understand what it all really means. I'd also avoid using the X-UA-Compatible meta tag as well as it's just IE's horrible invention and isn't needed when using current standard DOCTYPEs.
 
angelwatt said:
Browsers don't fully support HTML5 and it's still in draft. I don't recommend use of that DOCTYPE currently, especially for someone new to web design as they won't understand what it all really means.
Click to expand...

The reason I suggested HTML 5 validation is that it gets rid of some of the stupid rules like the inability to put links around block elements - which helps separate the wood from the trees a bit better.

I should add that it is more important to get a site to display in IE/Firefox/Safari (depending on your audience) than it is to get it to validate.

angelwatt said:
I'd also avoid using the X-UA-Compatible meta tag as well as it's just IE's horrible invention and isn't needed when using current standard DOCTYPEs.
Click to expand...

At least IE 8 has made a massive step forward towards standards support - and the X-UA-Compatible tag is the compromise needed to get IE 8 onto every desktop fairly quickly - even in the corporate world - and you have to support IE regardless as it has so many users.
 
Eraserhead said:
The reason I suggested HTML 5 validation is that it gets rid of some of the stupid rules like the inability to put links around block elements - which helps separate the wood from the trees a bit better.

I should add that it is more important to get a site to display in IE/Firefox/Safari (depending on your audience) than it is to get it to validate.
Click to expand...

But people new to web design shouldn't be ignoring those validation errors. They need to learn about them to understand how HTML code should be structured. HTML5 won't be mainstream (except maybe the video tag) for a couple years probably so validating against it doesn't really help. Once a designer knows how to validate their code they can make an informed decision about which validation issues they're OK with ignoring.

At least IE 8 has made a massive step forward towards standards support - and the X-UA-Compatible tag is the compromise needed to get IE 8 onto every desktop fairly quickly - even in the corporate world - and you have to support IE regardless as it has so many users.
Click to expand...
My company hasn't approved anything past IE6. Thankfully I can use Firefox though. IE8 is a big improvement, and I'm glad they defaulted it to standards mode rather than forcing that meta tag to be needed in order for it to use standards like they originally wanted. As I said though, if you use a current DOCTYPE (as opposed to the HTML5 one), that meta tag won't be needed unless the site doesn't follow standards.
 
Using iWeb is gonna hurt your ability to generate a nicely formatted page. It would take a lot of work to get rid of the inline styling, which seems clunky. In any case, get rid of the <font> tag and the <center> tag. Follow Angelwatt's advice for the changing the CSS from body to #value. To center what's in the #Result div, do this.

Code: 
#result {text-align:center;}
#value {margin:0 auto;}
 
You must log in or register to reply here.
Register on MacRumors! This sidebar will go away, and you'll see fewer ads.
Top Bottom
Back