The typical CSS "box model" (also known as content-box) will produce something like this:
width + padding + border = total/visible width of box
height + padding + border = total/visible height of box
Lets look at the example div below, with the typical box-sizing: content-box.
border: 10px solid #fff;
In this case the padding and border will apply to the outside producing at total visible width of 300px (240px + 40px + 20px). We'd usually need to reduce the width of the box until everything fits just right.
Statistics tell us that about 80% of Canadians use a mobile phone, with roughly one quarter of them being smart phones (iPhone, Android, Blackberry etc). Every day, more and more people are accessing the web on their mobile device while on the go. When you consider that mobile plans run their course on 3 year cycles, with options to renew/upgrade sooner, my prediction is that within the next three years you will see a large increase in mobile browsing rates using smart phones such as the iPhone. The question isn't to mobile or not to mobile? The question becomes how can I get mobile right now...
In my last post I outlined some of the benefits of Safari in your day to day browsing. Today I'm going to highlight a lesser-known feature of Safari that might just be the first step in considering Safari for web development as well.