Monday, July 24th, 2006

Advanced Box Model Testing

Category: CSS, Testing, Usability

From, there are two new posts spotlighting something that developer after developer have struggled with at least once in their work – the differences between box models in the major browsers. They explore these differences in a two part series of posts.

In part one, they focus on the differences in the “border-box” model in Firefox, IE, Opera, Konqueror, and Safari. A sample page was created and screenshots were taken (both in standard and quirks mode). Their findings show that there was only one, in this test case, that rendered the example correctly in both modes – Konqueror. Others came close, but had to switch to a “context-box” model to render correctly both ways.

Their other findings in this first test include the differences between versions of Internet Explorer, problems with Firefox’s “box-sizing” rule, and Opera issues.

In part two of the series, they take the test up to the next level, testing this time for some overflow problems within the same tests as before.

The results for this test were similar – Konqueror was a clear winner for consistency between modes. Opera sees consistent errors between the two modes, and Internet Explorer doesnt even render the boxes in one mode. Firefox also sees some differences, with version 1.0 getting a failing grade for this test of the “content-box” settings.

Examples and screenshots of this second test are also included.

Posted by Chris Cornutt at 9:49 am
Comment here

3.8 rating from 28 votes

Comments Here »

Comments feed TrackBack URI

Leave a comment

You must be logged in to post a comment.