CSS Proprties and Browser compatibility
CSS Properties :
1) content
Never use content to set background image for div, instead use background-image : Example[AdSense-A]
.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
[AdSense-B]
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