Tag: cross browser

HTML Style , CSS properties Browser compatibility

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