I guess most of us have understood for a long time that browsers rarely see eye to eye when it comes to calculating percentages, whether that be in element widths, element positioning or background placements. In fact, the background percentages post I did last year demonstrated it pretty clearly.

Thanks to JQuery guru John Resig, we now have a clinical breakdown of exactly how much differently the browsers view this issue.

Read the full article for the detail, but the short version goes something like this..

If presented with a sub-pixel percentage:

  • IE6 and IE7 round the number up
  • Opera and Safari round the number down
  • Firefox employs a sort of clever but slightly weird methodology that rounds some percentages up and others down.

Is it any wonder it’s such a trial trying to get liquid columns borders to align properly? I’m not sure if knowing exactly why things are difficult makes it easier to take or harder.

Alex manages design and front end development for sitepoint.com and is SitePoint's Design and UX editor.

Free Guide:

How to Choose the Right Charting Library for Your Application

How do you make sure that the charting library you choose has everything you need? Sign up to receive this detailed guide from FusionCharts, which explores all the factors you need to consider before making the decision.

  • dusoft

    Always leave at least 1% of width free to be conquered by rounding and calculations… I think that’s very old tip that’s still valid nowadays.

Learn JavaScript for free!
Free course: Introduction to JavaScript

Yours when you take up a free 14-day SitePoint Premium trial.