If you’ve had much experience using CSS, then talk of the box model shouldn’t be new to you. I feel it is important in website design to have understanding of certain concepts and models, in order to make clear why certain things happen and also why certain things don’t.
What Is The Box Model?
The Box model is, put simply, the way that The CSS standards consortium, W3C, have intended CSS box layouts to be interpreted by Internet browsers. When you using rectangles or boxes for website design, there are certain properties available to help with positioning. The four most common properties of the Box Model are…
- Margin – This is the area furthest to the outside of the box
- Border – Sits in between the Padding and the Margin
- Padding – Controls how much space sits inside the border.
- Content – The part of the box where any content will sit.
Further more, we can look into how each of these properties affects the width and height of our layout boxes.
Actual Height = height + border + padding + margin
Actual Width = width + border + padding + margin
With website design standards in place, all browsers can interpret the model to give cross browser compatibility when viewing the CSS layouts in different browsers.
Website Design Couldn’t be that easy?
Of course it couldn’t, as certain browsers do render these models slightly differently, which brings the inevitable migraine for website designers around the globe, of ensuring that their website look right in each of the major browsers.
It is commonly agreed in the industry, that the main culprit for this misrepresentation of the model, is indeed Microsoft’s Internet Explorer 6 and earlier.
As the interpretation of the model is slightly different, it is important to understand how you can work around these issues to ensure that your website design remain compatible.
IE6 Hacks, fixes and Workarounds.
I won’t go into detail as to what you can do to fix these issues, but point you in the right direction to find from quality resources on the web
Find Out More Here…
Wikipedia Box Model Bug
IE and the CSS Box Model
Community MX Article
Thanks for reading the post, and I hope you now understand a little bit more about what can make the Box Model and avoid wasting time in the future.
