CODEWITHSUNDEEP
css
laci37
laci37

Reputation: 490

CSS Rule not parsed

This is part of a css file:

.imgContainer>img.wide {
    max-width: 100%;
    max-height: 100%;
    height: auto;
}

.imgContainer>img.tall {
    max-height: 100%;
    max-width: 100%;
    width: auto;
}

/* header and its elements*/
#header {
    background-color: #1020B8;
    color: #FFF;
    height: 30px;
    margin: 0;
    padding: 0 20px;
}

#logo {
    color: #FFF;
    float: left;
    margin: auto 0;
    line-height: 30px;
}

The #header rule is not parsed, why? The #logo rule is parsed. I have tested this in Chromium and Firefox. If I put the .imgContainer rules to the end of the file everything works right. I uploaded the whole css file here: https://gist.github.com/anonymous/5911008.

Upvotes: 1

Views: 138

Answers (2)

RichardTowers
RichardTowers

Reputation: 4762

Interesting.

You have a rogue character in your CSS just above the #header rule:

    .imgContainer>img.tall{
    max-height:100%;
    max-width:100%;
    width:auto;
    }​
/*   ^ -- There! */

See it? Just there after the closing brace.

Here's a jsfiddle that reproduces the issue (at least for me; IE9):

I think the character's a U+200B - zero width space.

Interestingly the CSS validator seems not to catch this issue. The spec seems pretty clear on the matter of invalid whitespace though:

The token S in the grammar above stands for white space. Only the characters "space" (U+0020), "tab" (U+0009), "line feed" (U+000A), "carriage return" (U+000D), and "form feed" (U+000C) can occur in white space. Other space-like characters, such as "em-space" (U+2003) and "ideographic space" (U+3000), are never part of white space.

Upvotes: 6

Pat Lillis
Pat Lillis

Reputation: 1180

Does your #header element get affected by any other CSS rules? A good way to check is the following:

  1. Open your site in Chrome
  2. Press CTL-SHIFT-I to bring up the Developer's Tools
  3. Go to the Elements tab
  4. Click on your #header element in the DOM tree
  5. Look at the Styles drop-down to the right, and see if your CSS rules are getting overridde

Upvotes: 0

Related Questions