SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    SitePoint Member
    Join Date
    Sep 2004
    Location
    Massachusetts
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Linked vs. embedded style differences

    I must be doing something wrong but it's escaping me what it is. I want to apply an overall body background color to a web page. When I link the stylesheet the color doesn't render, but embedding the style in the document head allows the color to render as expected. Other style elements render correctly in both embedded and linked versions, just the body background color is different.

    Here's the style info:

    <style type="text/css">
    body {background-color: blue}
    h1 {background-color: #00ff00}
    p {background-color: rgb(250,0,255)}
    </style>

    (Yes the colors are gruesome choices but I'm just testing)

    FWIW, my DTD is XHTML 1.0 Transitional.

    Any idea what it is I'm missing?

  2. #2
    SitePoint Wizard
    Join Date
    Dec 2003
    Location
    USA
    Posts
    2,582
    Mentioned
    29 Post(s)
    Tagged
    0 Thread(s)
    They should function exactly the same.

    Just a few things that you can check to make sure of:
    1) Make sure you are linking to the external sheet properly (do something super obvious to test).
    2) Double-check spelling. In a group I'm in, someone had this same problem (in reverse) and the accidentally had "x" instead of "px".

    Other than that I can't think of too much. If you are using Firefox, you can use the error console to help with CSS problems because they will show up in there. Open the console and clear it, then refresh your page and see if anything shows up.

  3. #3
    SitePoint Member
    Join Date
    Sep 2004
    Location
    Massachusetts
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I know there's no problem with the linking of the stylesheet because other style changes are rendered as expected; just the body background doesn't show up in the linked version. This occurs in both IE 7 and FF 3.0.1.

    In FF, the error console has three warnings:

    "Selector expected. Ruleset ignored due to bad selector" for both lines 1 and 6, and "Unexpected end of file while searching for closing } of invalid rule set" on line 6 (see css code example in my original posting).

  4. #4
    SitePoint Member
    Join Date
    Aug 2008
    Posts
    14
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Should like you may be missing a semi-colon ; somewhere. Leading to an invalid ruleset.

  5. #5
    SitePoint Member
    Join Date
    Sep 2004
    Location
    Massachusetts
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    OK, I now did this:

    <style type="text/css">
    body {background-color: blue;}
    h1 {background-color: #00ff00;}
    h2 {background-color: transparent;}
    p {background-color: rgb(250,0,255);}
    </style>

    With semi-colons after each declaration, but no change: the body background color changes to blue when I embed the style in the doc head, but when I link the stylesheet the body background color disappears but the other declarations are still rendered.

    BTW, here's my link statement in the doc head:

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

    It doesn't matter where in the doc head the link element appears, does it? I have it after a few meta tags, but I can't imagine that would be the cause.

  6. #6
    SitePoint Member
    Join Date
    Aug 2008
    Posts
    14
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by rvanderh View Post
    It doesn't matter where in the doc head the link element appears, does it? I have it after a few meta tags, but I can't imagine that would be the cause.
    Nope, you can place it anywhere in the head section.

    Is that your entire stylesheet?
    If not, have you check all your style declarations above those?

    What I meant was that you may be missing a semi-colon above those declarations causing everything below the missing semi-colon to be misinterpreted.

    Does that make sense?

  7. #7
    SitePoint Member
    Join Date
    Sep 2004
    Location
    Massachusetts
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes, that's the whole stylesheet.

  8. #8
    SitePoint Member
    Join Date
    Aug 2008
    Posts
    14
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ok.

    Does your style sheet contain <style type="text/css"> along with the closing </style>?

    If so, remove those, they are not needed.

    Try that.

  9. #9
    SitePoint Member
    Join Date
    Sep 2004
    Location
    Massachusetts
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks! That took care of it. But I still wonder why only the body background color was affected. Then again I suppose it makes sense since the body declaration was the first line after the problematic <style ...> element.

  10. #10
    SitePoint Member
    Join Date
    Aug 2008
    Posts
    14
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Your welcome!

    Errors are funny like that.

  11. #11
    SitePoint Wizard
    Join Date
    Dec 2003
    Location
    USA
    Posts
    2,582
    Mentioned
    29 Post(s)
    Tagged
    0 Thread(s)
    The reason only the body is effected was because it was essentially trying this:

    <style type="text/css"> body {background-color: blue;}

    as the first line... which makes no sense to CSS. After that }, it is on to a new rule so everything afterwards was fine.


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
  •