Home > Development > The Border Box Model – Solved

The Border Box Model – Solved

A recent redesign of an ancient website brought my attention back to a problem that even makes software archaeologists scratch their heads and think, “rings a bell, but possibly before my time”: The Border Box Model bug.

As a quick summary, the bug (described in more detail on Wikipedia) was a difference between the way that different browsers treated an element’s widths when padding was applied; ‘correct’ browsers had the width as an absolute, whilst Internet Explorer 6 added the padding and border sizes to the given width.

The site in question was written around six years previously, when Internet Explorer 6 was still the most popular (I use that term advisedly) browser, firmly embedded within Government authorities worldwide. The design at the time was simplistic in layout but complex in code, but for the time was sufficient. The newer design was neater, smarter but – crucially – had to still work with IE6, this being a system used by local Government.

The workaround, to handle both IE6 and browsers lacking this bug, was to have two layers of containers; one for the width and the other for the padding:

    <div style='width: 750px'>
        <div style='padding: 0 20px 0 20px'>
            content
        </div>
    </div>

However, the site I was working on had hundreds of pages; the older design had no need for this workaround and as a result only one container was used. The eventual solution to this was so simple that I was surprised by the lack of articles suggesting it. jQuery includes a method ‘wrap’, so the solution (given that the container had a CSS class of ‘container’) is the following piece of JavaScript:

    $(document).ready(function() {
        $('.container').wrap("<div class='containerOuter' />");
    });

A simple update to the CSS completes the solution:

    .containerOuter { width: 750px; }
    .container { padding: 0 20px 0 20px; }
Advertisements
Categories: Development
  1. No comments yet.
  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: