SitePoint Sponsor

User Tag List

Results 1 to 14 of 14
  1. #1
    SitePoint Member
    Join Date
    Jun 2012
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    I have a question about HTML

    Hi,
    I just started a website, and I am using CSS to change the font. The problem is that when I open the page, for a fraction of a second I see the text as Times New Roman, and then it switches to Verdana, as specified in the style sheet. I don't see other pages on the web doing this, at least not the good pages. Can anyone tell me what I am doing wrong? Thanks.

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,596
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    Hi PRinCanton. Welcome to the forums.

    It's a little hard to tell without seeing the site. Can you provide a link?

  3. #3
    SitePoint Member
    Join Date
    Jun 2012
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here is the link:
    http://www.prashanthspage.com/

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,596
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    Hm, I can't see any reason why you'd be getting that effect. What browser are you using?

    The main thing I'd suggest is that you add the red bit to the following rule:

    Code:
    font-family: Verdana, sans-serif;
    It's good to specify the computer's default sans-serif font in the event that it can't find (or takes time to find) the specified font.

  5. #5
    SitePoint Member
    Join Date
    Jun 2012
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello and thank you for the response! I am using Firefox 6.0.2, and I made the changes you specified to the style sheet, and still I get the problem when the page loads (I see Times New Roman for a split second, and then I see Verdana). Could it be a problem with the html or head element?

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,596
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    It's odd that you are seeing that. I don't see that effect in any browser. Have you tried clearing your cache? (Probably irrelevant, but you might as well try.)

  7. #7
    Mouse catcher silver trophy
    Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,824
    Mentioned
    110 Post(s)
    Tagged
    1 Thread(s)
    My guess would be that it's the invalid code that is causing the browser to scratch it's head for a moment while thinking "Hey, what?", before it figures out what you want it to do.

    If you're using XHTML or fauXHTML, you need to close all elements, including spot tags like <meta>, so you should have
    Code:
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    You've also got two <body> tags, one legal and one not. There should just be one, after the closing </head>. Try changing those and see if that makes a difference.

  8. #8
    SitePoint Member
    Join Date
    Jun 2012
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I tried clearing the cache, and the problem is still there. The problem is easily seen when I refresh the page. But when I use the embedded style sheet instead of the external style sheet, the problem goes away! I am happy but frustrated that the external style sheet did not work. Here is the line I used to reference the external style sheet and also the style sheet itself. Can you see any problems with them?

    <link href="style1.css" rel="stylesheet" type="text/css"/>

    /*
    CSS for Prashanth's Page
    */

    body {
    font-family: Verdana, sans-serif;
    }

  9. #9
    SitePoint Member
    Join Date
    Jun 2012
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I just saw this post. Are you referring to the following body tag:

    <body style="background-color:PowderBlue; font-family: Verdana, sans-serif;">

    Since I am new to HTML, I thought this was a "body style" tag! I will change this and see if it helps. I will also change the forward slash that you highlight and see if this helps. Thanks for the advice!

  10. #10
    Mouse catcher silver trophy
    Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,824
    Mentioned
    110 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by PRinCanton View Post
    I just saw this post. Are you referring to the following body tag:

    <body style="background-color:PowderBlue; font-family: Verdana, sans-serif;">

    Since I am new to HTML, I thought this was a "body style" tag! I will change this and see if it helps. I will also change the forward slash that you highlight and see if this helps. Thanks for the advice!
    You're allowed to do that, no problem at all (although for a site with more than one page it isn't a good idea) ... what you're not allowed to do is to put it before the closing </head> tag ... sorry if I didn't make that clear!

    Actually, slight change of tack – technically you're not allowed to use colour names in CSS beyond the 16 base colours, you should either use #hex or rgb() codes instead. Although I'm not aware of any current browsers that using names will cause problems for, it's still best if you can do it right just in case it causes problems in future browsers. And there isn't a lot of point in declaring the same font properties in both inline CSS and an external stylesheet.

  11. #11
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,732
    Mentioned
    31 Post(s)
    Tagged
    0 Thread(s)
    I am not seeing the effect either.
    In any case, inline css is actually not a very efficient way to code, in general.
    <body style="background-color:PowderBlue; font-family: Verdana, sans-serif;">
    Tho it's still valid code, you should do all your styling within a <style> tag or an external CSS file imported via a link. This may or may not be the culprit, but I noticed your site is very media heavy, it could be that your computer is getting chocked from all the media data, and with the CSS instructions being inline, it's "lagging" when rendering.

  12. #12
    SitePoint Member
    Join Date
    Jun 2012
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I notice the effect only in Firefox (6.0.2). I had previously made some changes to Firefox to make it load faster, which might be the cause of the problem. When I use IE, I notice only a band of the screen will change back to the original background color (white) when I hit refresh, and even this happens very quickly. I used some html from w3schools.com and created another page and another style sheet just to make sure it wasn't anything bad in my own code. Here is a link to the page that I made from the w3schools code:

    www.prashanthspage.com/test.html

    The above page still has the effect that I am talking about. I notice that none of the professionally done pages seem to do this, even in my tweaked Firefox browser, and I have looked at the page source for those pages and they all have style sheets. Some examples are indeed.com, vongage.com, search.yahoo.com, and even this page (sitepoint). I am wondering if it is something in their headers or their html definition that is making their pages load so well. I notice that the problem completely disappears when I use inline styling as in the code that I wrote in the previous post (I am using inline styling now on the index page). But I don't want to be limited to using inline styling. Thank you all for your posts and help!

  13. #13
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,596
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    It's an odd situation, but if it's only happening in Firefox 6, it's no biggie. The current version is Firefox 12.

    You've gone back to not ending your font list with serif/sans-serif. It's best to make that a standard procedure.

  14. #14
    SitePoint Member
    Join Date
    Jun 2012
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    PRinCanton

    I can't recreate the text change either, but suggest you put the font-family CSS first. Font-family does create problems if not defined first. If this doesn't change it for you, try <body style="font-family: Verdana, sans-serif!important; background-color:PowderBlue;">

    Placing "!important" immediately behind the last font family and before the semi-colon should override any other font family references.

    It is also a good idea to change the background color from PowderBlue to the hex color code "#B0E0E6"


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •