Archive | Cross-Browser Support RSS feed for this section

Cross-Browser Compatibility

6 Jul

Anyone who’s a web developer will inevitably come across the cross-browser compatibility issue.  Namely, different browsers and different versions of browsers will display a website differently, which can cause some major pain issues for the well-intentioned developer.  And although I am no expert on cross-browser issues yet, I have gathered a list of tips for those of you daring to venture this beaten path. Hey, it’s not that bad.

  1. Firefox 5 will pick up some CSS that IE8 will not pick up.  For example, the toggle panel borders in PrimeFaces 2.2 says it should be rounded (4px), but the borders show up as sharp-edge corners in IE8.  And when you look at the same component in FF5, it is displayed with rounded corners.  To make PrimeFaces toggle panels sharp-edged in FF5, please overwrite the default CSS like this:
    2.  .ui-corner-all { border-radius:0 !important }
    The bottom line is, FF5 is more strict with CSS than IE8.
  2. IE8 has problems with Z-Index, namely, it will not detect some Z-index properties.
  3. IE is slow.  Anyone who has used IE and FF will notice that IE is much slower in performance than FF.
  4. For IE8, there is something called ‘IE8 Document Mode’ which, if selected, will allow a website to render properly in IE8.  If this ‘Document Mode’ is not turned on (via F12 Developer Tools), the website will be rendered as a bunch of misplaced, illegible elements.  For those of you wanting your site to display properly in IE8, it would be a good idea to try to find a way to programmatically force the browser to render in ‘IE8 Document Mode’ automatically.
  5. A new feature in FF5 is text areas have a small triangle on the bottom right-hand corner, which allows the end user to adjust the text area accordingly.  If you want to turn this feature off, just use the below CSS to get rid of the triangle:
    6.  textarea { resize:none!important }
  6. Another point of contention is that sometimes you cannot disable certain radio buttons using JavaScript in IE8. In IE8, you’d have to disable the UI component that wraps the particular radio button, that is, you have to disable its enclosing UI component in order to disable the radio button that is inside. With FF5, that is not the case. With FF5, you just need to disable each specific radio button instead of just the radio button UI component. To get the specific radio button ID, you would need to go to ‘View Source’ to get the exact ID of the radio button you want to disable.