CSS Rendering Bug - CSS Comment

Discussion in 'Internet Explorer' started by Will Fastie, May 21, 2007.

  1. Will Fastie

    Will Fastie Guest

    The following bit of CSS does not render properly in IE7.0.5730.11:

    div.gallery h6 { border: 1px dashed black; background-color: /* #8492B5;
    */ #c8d6f9; }

    In this case, the background renders as white (the default). It renders
    properly in FireFox and in Expression Web's design mode.

    If the comment is moved, it will render properly:

    div.gallery h6 { border: 1px dashed black; background-color: #c8d6f9; /*
    #8492B5; */}

    I admit that this code is a bit pathological but I often use the technique
    when debugging so I can keep track of prior values. In any case,
    fully-bracketed comments should work anywhere.
     
    Will Fastie, May 21, 2007
    #1
    1. Advertisements

  2. Will Fastie

    PA Bear Guest

    1. Advertisements

  3. Will Fastie

    Will Fastie Guest

    I'm sorry, I don't get your point. Why did you offer those links, the second
    of which doesn't seem to work?
     
    Will Fastie, May 21, 2007
    #3
  4. Will Fastie

    PA Bear Guest

    PA Bear, May 21, 2007
    #4
  5. Will Fastie

    BSOD Guest

    Will,
    Seems like a strange place to post a CSS question so I'm not sure who you
    were expecting to answer this in this particular newsgroup, I just happened
    upon it almost by accident, but can answer your question.

    Your slightly mixed up on where your pointing blame, IE7 is doing the
    correct thing, it's Expressions Web and Firefox that are dealing with what
    you've done wrongly, even though it seems to you to be closer to the reults
    you were after.

    The problem your experienceing actually has nothing to do with how you've
    commented out the first value, this is being correctly commented out, it's
    the extra white space you have in there that IE7 is correctly dealing with as
    it should by following XML standards stricter than Firefox and Expressions
    Web does (which are very poorly compaired to IE7).

    Here's an example you can use to see for yourself what I'm explaining to
    you...

    ------------------------------------------------------------------

    <style type="text/css">
    body {
    background-color: /* #8492B5; */#c8d6f9;
    }
    </style>

    ------------------------------------------------------------------

    You'll notice when there is only a single white space after the colon it
    works correctly, as it should do.

    However if you add in extra whitespace to this that second value gets
    ignored, as it should per strict XML standards which is the correct thing to
    do and IE7 does such a great job of better following.

    ------------------------------------------------------------------

    <style type="text/css">
    body {
    background-color: /* #8492B5; */ #c8d6f9;
    }
    </style>

    ------------------------------------------------------------------

    See there, now with the double white space after the colon IE7 will default
    to the same as if you placed no value in there at all. It should do this,
    Firefox and Expression Web are wrong here. Niether of which deal with XML
    well at all even though they both should and are supposed to.

    It gets even stranger though, here's where they all mis, add your extra
    white space in there with no comment tags at all and see what you get. Yes,
    even IE7 will show your specified color then.

    This works as expected (not correct):
    -----------------------------------------------

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

    But this gets you right back to what your calling a problem showing up again:

    -----------------------------------------------

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

    -----------------------------------------------

    Funny stuff, interesting facts, or just plain annoying, you be the judge,
    but just be aware XML can be very picky about things that were once tolerated
    or capable of doing if they aren't correct. This is how XML is supposed to be
    by design, very picky and not forgiving to simple mistakes that are hard to
    find yet cause issues. This is where a good validator will certainly be your
    best friend, even though most of the CSS and XHTML specific validators
    currently available have flaws of their own.
     
    BSOD, May 22, 2007
    #5
    1. Advertisements

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments (here). After that, you can post your question and our members will help you out.