I'm having some kind of weird problem with my CSS. I refactored some code from @chriscoyier using the SMACSS approach to modularize it.
If I move .ribbon.green to the bottom of the CSS, it doesn't get applied. Is this something to do with the ribbon:after & ribbon:before ?
Moving it down to the botton seems to work fine in jsFiddle but not in Firefox or Chrome. http://jsfiddle.net/SkinnyGeek1010/cDWKe/1/
Any ideas of why it does this? and is there anyway to move .ribbon.green down to the bottom? This would make it easier to change the "skin" with a mixin.
** added dropbox html **
http://dl.dropbox.com/u/1407764/www/stackoverflow/corner-ribbon/green_ribbon_example.html
I have tested it. It is working fine even if you moved .ribbon.green to bottom. May be conflicting with some other rules.