SitePoint Sponsor

User Tag List

Results 1 to 22 of 22
  1. #1
    SitePoint Zealot Macchiato's Avatar
    Join Date
    Nov 2009
    Posts
    149
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    No background in Safari and Chrome

    I have a background image assigned to the body element. It's 1px in width and I let it repeat horizontally. In IE, Firefox and Opera it looks fine, but when I look at my page in Safari or Chrome, the background doesn't show up.

    Why doesn't the background show up in Safari and Chrome? And how can I make it show up?

    Code CSS:
    body
    {
    font-family:verdana, sans-serif;
    padding:0;
    margin:0;
    text-align:center;
    background:#fff url(../img/background.gif) repeat-x center top;
    }

  2. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Hi, we would need to see a site to actually be able to diagnose this . Just that snippet will work in chrome/sfari.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  3. #3
    SitePoint Zealot Macchiato's Avatar
    Join Date
    Nov 2009
    Posts
    149
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Even with a simple code like the following one, the background doesn't show up in Safari and Chrome:

    HTML 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">
    
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link rel="stylesheet" media="all" type="text/css" href="css/main.css" />
    </head>
    
    <body>
    
    </body>
    
    </html>
    Code CSS:
    body
    {
    font-family:verdana, sans-serif;
    padding:0;
    margin:0;
    text-align:center;
    background:#fff url(../img/achtergrond.gif) repeat-x center top;
    }

    I have no idea why.

  4. #4
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    It's appearing for me
    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">
    
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link rel="stylesheet" media="all" type="text/css" href="css/main.css" />
    <style>
    body
    {
    font-family:verdana, sans-serif;
    padding:0;
    margin:0;
    text-align:center;
    background:#fff url(http://www.sitepoint.com/forums/image.php?u=291251&dateline=1264190847) repeat-x 
    
    center top;
    }
    </style>
    </head>
    
    <body>
    
    </body>
    
    </html
    >
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,296
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    What does the rest of the css look like (if there is any) as a typo above or below could cause issues?

    As Ryan said above the code is working for us ok so there must be some other cause.

  6. #6
    SitePoint Zealot Macchiato's Avatar
    Join Date
    Nov 2009
    Posts
    149
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I got it to work It seems to only work in Chrome and Safari when I use internal CSS within the Head tag. An external CSS won't work, even when I use a simple code that Ryan is using.

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,296
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Do you have any stray characters (invisible or otherwise) at the top of the stylesheet? These could kill any styles.

    Are you using an @charset rule?

    If so is it the first rule in the stylesheet and there must be no spaces or invisible characters above.

    Does your stylesheet validate?

    Hope that helps to narrow the problem down.

  8. #8
    SitePoint Zealot Macchiato's Avatar
    Join Date
    Nov 2009
    Posts
    149
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I had @charset "utf-8"; between my code and my copyright text. I moved @charset "utf-8"; to the top of my stylesheet and that fixed the problem

    I never knew @charset could have such an impact

    Since I already have <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> in my Head tag, could I remove @charset "utf-8"; from my stylesheets?

  9. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,296
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Yes you could remove it although the w3c recommend that you always include it.

    From my understanding the http headers over-rule all other methods of encoding (but you would of course need to specify something in the page for viewing off-line or from cd etc).

    The priority would be:


    1. HTTP Content-Type
    2. XML declaration
    3. meta charset declaration
    4. link charset attribute



    More reading here
    http://reference.sitepoint.com/css/at-charset
    http://www.w3.org/International/test...ding-detection
    http://articles.sitepoint.com/articl...ter-encoding/2

    Off Topic:

    Tommy (autistic cuckoo) will probably have something to say on this
    Last edited by Paul O'B; Jan 28, 2010 at 07:56. Reason: link fixed :)

  10. #10
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,118
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Yes you could remove it although the w3c recommend that you always include it.
    Try following that link, Paul.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  11. #11
    SitePoint Guru Luki_be's Avatar
    Join Date
    Jun 2008
    Location
    Brazil, Minas Gerais. But i'm from Belgium.
    Posts
    867
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    lol. It should be this, point 4.4
    SitePoint Guru
    Sitepoint - the ultimate Css well
    As a computer, I find your faith in technology amusing.
    Sitepoint reference, your friend in need

  12. #12
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,296
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Sorry, it should have been this link from the w3c tutorial.

  13. #13
    SitePoint Zealot Macchiato's Avatar
    Join Date
    Nov 2009
    Posts
    149
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'll include it then, if it's required in some cases and to put a smile on w3c's face

  14. #14
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Also look at this thread where I found that it was getting rid of the first rule after the charset in webkit
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  15. #15
    SitePoint Zealot Macchiato's Avatar
    Join Date
    Nov 2009
    Posts
    149
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You mean adding a dummy line like this?:

    Code CSS:
    @charset "utf-8";
    /*
      -------------------------------------------------------------------------
     
    	Copyright (c) 2010 Example. All rights reserved.
    	[url]http://www.example.com/[/url]
     
        -------------------------------------------------------------------------  
    */
     
    dummyline{}
     
    body
    {
    font-family:verdana, sans-serif;
    text-align:center;
    background:#fff url(../img/background.gif) repeat-x center top;
    padding:0;
    margin:0;
    }

  16. #16
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Yes, that fixed it (or it should have) because the charset was ignoring hte first rule after the charset in webkit.

    Removing the charset also works
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  17. #17
    SitePoint Zealot Macchiato's Avatar
    Join Date
    Nov 2009
    Posts
    149
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the help Ryan & Paul!

  18. #18
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    You're welcome .
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  19. #19
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,296
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by Ryan
    Yes, that fixed it (or it should have) because the charset was ignoring hte first rule after the charset in webkit.
    What bug are you referring to Ryan? I don't get a problem at all with Safari.

    If you are referring to this bug then it is only evident when you do something invalid

    The charset must be the very first thing in the stylesheet and then it will work properly. It is not allowed to be after any characters (visible or invisible) or comments or code.

    If it's badly formed or incorrectly placed then it will produce errors.

  20. #20
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    What bug are you referring to Ryan? I don't get a problem at all with Safari.
    Did you go to the thread I linked to?

    If you are referring to this bug then it is only evident when you do something invalid

    The charset must be the very first thing in the stylesheet and then it will work properly. It is not allowed to be after any characters (visible or invisible) or comments or code.

    If it's badly formed or incorrectly placed then it will produce errors.
    Yes, I siad in the thread I linked to that the charset was invalid, I pointed that out to the OP, however I did not know about how to go about best fixing the bug in the other thread, so I gave the OP in this thread and hte last thread the same advice.

    I figured it had to be a bug though I did not go looking for the actual bug report.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  21. #21
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,296
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by RyanReese View Post
    Did you go to the thread I linked to?
    Yes I looked at the thread but there was no original code for me to check which bug it was

    You don't need the dummy line if it's done right

  22. #22
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    It wasn't done right. It was indeed the first line but there were characters before it (which I kno0w was invalid, but I didn't know it triggered the bug)

    The dummy line was jsut something I thought of because I noticed it was only invalidating the first line of CSS that came after the invalid charset.

    Was thinking on the spot lol .
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work


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
  •