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

Discussion in 'Web Design and Development' started by razorianfly, Jun 26, 2009.

  1. razorianfly macrumors 65816

    razorianfly

    Joined:
    Oct 16, 2007
    Location:
    Cheshire, United Kingdom
    #1
    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:

    [​IMG]

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

    [​IMG]

    My question is: Why?

    Any help is greatly appreciated.

    Thanks again,
    Arron
     
  2. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #2
    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.
     
  3. MegaMan1311 macrumors regular

    Joined:
    Jun 30, 2007
    Location:
    USA
    #3
    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>...
     
  4. razorianfly thread starter macrumors 65816

    razorianfly

    Joined:
    Oct 16, 2007
    Location:
    Cheshire, United Kingdom
    #4
    Thanks for all your suggestions so far. Trying them out now.

    If it helps you can find the full HTML page code at: http://pastie.org/526085

    Thanks again,
    Arron
     
  5. Darth.Titan macrumors 68030

    Darth.Titan

    Joined:
    Oct 31, 2007
    Location:
    Austin, TX
    #5
    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.
     
  6. Eraserhead macrumors G4

    Eraserhead

    Joined:
    Nov 3, 2005
    Location:
    UK
    #6
    ^^ 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.
     
  7. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #7
    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.
     
  8. NathanCH macrumors 65816

    NathanCH

    Joined:
    Oct 5, 2007
    Location:
    Stockholm, Sweden
  9. Eraserhead macrumors G4

    Eraserhead

    Joined:
    Nov 3, 2005
    Location:
    UK
    #9
    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.

    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.
     
  10. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #10
    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.

    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.
     
  11. memco macrumors 6502

    Joined:
    May 1, 2008
    #11
    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;}
    
     

Share This Page