CSS Proprties and Browser compatibility
CSS Properties :
1) content
Never use content to set background image for div, instead use background-image : Example.divItem{ position: absolute; top: 12px; right: 11px; width: 40px; height: 40px; content: url(../../images/elective.png) } The above properties works fine in Chrome, but in firefox the image doesn't appear. .divItem{ position: absolute; top: 12px; right: 11px; width: 40px; height: 40px; content: url(../../images/elective.png) }
2) background-size
.divItem{ position: absolute; top: 12px; right: 11px; width: 40px; height: 40px; background-image: url(../../images/elective.png); -webkit-background-size: 100%; background-size: 100% } -webkit-background-size: is specifically for those browsers which support web kit layout rendering engine. Note : http://en.wikipedia.org/wiki/WebKit Opera supports -o-background-size: But in latest opera versions, webkit itself is sufficient
3) box-shadow
.divItem{ border: 1px solid #08c; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 3px 6px rgba(0, 0, 0, 0.25) } This doesn't works in Firefox, .divItem { border: 1px solid #08c; -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 3px 6px rgba(0, 0, 0, 0.25); -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 3px 6px rgba(0, 0, 0, 0.25); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 3px 6px rgba(0, 0, 0, 0.25) }
4) border-radius:
.divItem{ border-radius: 100px; } For Firefox and other browsers .divItem{ -moz-border-radius: 100px; -webkit-border-radius: 100px; border-radius: 100px; }
5) innerText :
innerText is old style of using in older version of internet explorer.
Instead of using innerText , use textContent or innerHTML, this works fine in all browsers.
User innerHTML Or contentText