Question

I’m working on Ruby-on-Rails 3.2.1. I’ve following DOM structure.

UPDATE: removed the </img> tag as mentioned by Gaby. Problem still persists.

<div class="frame">
        <img src='SOME_PATH' class="frame-image">
</div>​

And following CSS

.frame { position:relative;border:1px solid #CCC;border-radius:2px;-moz-border-radius:2px; }
.frame:before
{
    position:absolute;
    content:'';
    border:2px solid #F2F2F2;
    height:100%;width:100%;
    box-sizing:border-box;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
}
img.frame-image     /* IT WON't BE APPLIED?! */
{
    min-width:30px;min-height:30px;
    max-width:200px;max-height:200px;
}​

The problem I’m facing is, CSS applied to img.frame-image is not working/not getting applied. I tried on Chrome 18 and FireFox 12. I don’t see the style in Chrome’s element inspector or in FireBug. It is also not getting overridden by any other CSS.

For demo I tried to create jsfiddle for this. It works there!

But surprisingly when I write img.frame-image CSS above .frame:before CSS, it works!!

.frame { position:relative;border:1px solid #CCC;border-radius:2px;-moz-border-radius:2px; }
img.frame-image        /* NOW IT WILL BE APPLIED */
{
    min-width:30px;min-height:30px;
    max-width:200px;max-height:200px;
}​
.frame:before
{
    position:absolute;
    content:'';
    border:2px solid #F2F2F2;
    height:100%;width:100%;
    box-sizing:border-box;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
}

Any idea why is it happening? is it framework (RoR) related issue or CSS semantics?

Answer 1

First of all remove the </img> as that is invalid..

Tag omission

The img element is a void element. An img element must have a start tag but must not have an end tag.

Make sure that the CSS is loaded (and not using a cached version).
Also make sure that there is no script that might be removing/altering your classes.

(i also hope the comment in the CSS are just for stack overflow as they are invalid)

---

Update

Firebug was showing a weird space at the beginning of the rule so i run

var txt = document.styleSheets[0].cssRules[3].cssText;
console.log(0, ':', txt[0],':', txt.charCodeAt(0) );

and got 8203 as the charCode …

This is the zero-width-space character. You need to remove it as it is being used as part of the selector (and thus fails).

---

To see the change live, try running

var txt = document.styleSheets[0].cssRules[3].cssText;
var fixedRule = txt.substring(1);

document.styleSheets[0].deleteRule(3);
document.styleSheets[0].insertRule(fixedRule, 3);

from firebug console, and you will see that it will be fixed .. (the only thing the script does, is to remove the wrong rule and reinsert it after removing the first character)