SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Zealot yacka's Avatar
    Join Date
    Aug 2006
    Posts
    124
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS declaration dropped when in cdata

    I've noticed that when I include style within cdata as below, the first declaration goes 'missing'. This is in IE6 btw.

    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html>
    <head>
    <style type="text/css">
    <![CDATA[
    
    .first
    {
    	border: solid 1px;
    	width: 200px;
    }
    
    .second
    {
    	border: solid 1px;
    	width: 200px;
    }
    
    ]]>
    </style>
    </head>
    <body>
    
    <div class="first">&nbsp;</div>
    <div class="second">&nbsp;</div>
    
    </body>
    </html>
    There should be two identical boxes, but only the second appears. Is there anything obviously wrong here? I can fix it, but I'd like to know why it's behaving this way and I'd prefer to keep everything 'correct' if possible. Any clues?

  2. #2
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    I'd leave out the CDATA stuff. I don't see the point of it. The CSS is between style tags which indicate their content is CSS and so it seems pretty safe to me in there. The CDATA stuff just seems like unnecessary faff.

    However, to answer your question, I'm guessing IE thinks you're after <![CDATA[.first and so this might fix it:
    Code:
    <style type="text/css"><!--/*--><![CDATA[/*><!--*/
            ...
          /*]]>*/--></style>
    Got it from here: http://www.hixie.ch/advocacy/xhtml

    It's really ugly and I really don't see the need to use it.

  3. #3
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    What I'd do is put the stylesheet in an external file and then link to it in the HTML document.

  4. #4
    bronze trophy
    Join Date
    Dec 2004
    Location
    Sweden
    Posts
    2,670
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The reason why it doesn't work as you expect is that you're not using XHTML (dispite the doctype).

    You're using HTML and "<![CDATA[" inside a <style> element in HTML is just a string, so the first selector in your style sheet is "<![CDATA[ .first" which is an invalid selector and so the entire ruleset gets dropped.
    Simon Pieters

  5. #5
    SitePoint Zealot yacka's Avatar
    Join Date
    Aug 2006
    Posts
    124
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by zcorpan View Post
    The reason why it doesn't work as you expect is that you're not using XHTML (dispite the doctype).

    You're using HTML and "<![CDATA[" inside a <style> element in HTML is just a string, so the first selector in your style sheet is "<![CDATA[ .first" which is an invalid selector and so the entire ruleset gets dropped.
    Ok, I omitted the title which caused it to fail validation. However, IE was still treating the content in standards mode and even with a totally standards compliant page, according to the w3c validator, it still drops the first declaration.

    You are right in that it looks like IE thinks the first selector includes "<![CDATA[". If I include the comment delimiters from Raffles suggestion, then it validates and works correctly. I'm going to chalk this down to an IE bug.

  6. #6
    bronze trophy
    Join Date
    Dec 2004
    Location
    Sweden
    Posts
    2,670
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by yacka View Post
    Ok, I omitted the title which caused it to fail validation.
    I'm not talking about validation. The doctype doesn't make your document XHTML. Doctypes can't do that.

    Since you can see the page in IE at all, I can easily draw the conclusion that you are using HTML. The server says "text/html". Or if you load the file locally, you use the file extension ".htm" or ".html". This is what makes the file HTML. It doesn't matter what the file contains. It doesn't matter if it looks like or validates as XHTML.

    (If you want XHTML, the server needs to say "application/xml" or "application/xhtml+xml", or use any of the file extensions ".xml", ".xht" or ".xhtml". Then CDATA sections will work as you expect, but nothing will work in IE because IE doesn't support XHTML in the first place. See the XHTML FAQ.)
    Quote Originally Posted by yacka View Post
    However, IE was still treating the content in standards mode and even with a totally standards compliant page, according to the w3c validator, it still drops the first declaration.
    Yes, and it is correct to do so.
    Quote Originally Posted by yacka View Post
    You are right in that it looks like IE thinks the first selector includes "<![CDATA[".
    All other browsers think so too, and they are also correct to do so.
    Quote Originally Posted by yacka View Post
    If I include the comment delimiters from Raffles suggestion, then it validates and works correctly.
    It "works" because it's just the old "<!--" (which is ignored by the CSS parser -- that's a hack to get a better backwards compatibility story with Mosaic 1.0 and Netscape 2.0 which don't support <style>) and a plain CSS comment (/* ... */). It doesn't do anything useful though, and neither does a CDATA section in this case (if you were actually using XHTML).
    Quote Originally Posted by yacka View Post
    I'm going to chalk this down to an IE bug.
    It's not a bug...
    Simon Pieters

  7. #7
    SitePoint Zealot yacka's Avatar
    Join Date
    Aug 2006
    Posts
    124
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for your clarification. I was trying to write code to adhere to xhtml for resilience and consistency in display. I see now that I can have the advantage of mostly standards compliant markup without need to render 100&#37; xhtml.


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
  •