When developing for the web using CSS there is a critical component of development that is the foundation of most design.
How can I avoid problems with the box model?
First of all, the box model is a simply representation of how a div is interpreted. See the image below, provided from w3.org.
When a developer creates a div container such as this, one would not think about it displaying differently on different browsers, but it does.
.container {
width:50px;
height: 50px;
margin-top:10px;
padding-top:5px;
border-top: #999999 5px;
}
Rather than getting into the many details as to why this happens, I am simply going to tell you how to prevent it from happening. Simply do this:
.container {
width:50px;
height: 50px;
margin-top:10px;
padding-top:5px;
border-top: #999999 5px;
}
Simply remove any reference to padding or borders! Now you may be asking yourself another question.
What if I want a border, or a padding?
This is resolved by nesting two divs together and viola! It will show correctly on multiple browsers!
.container {
width:50px;
height: 50px;
margin-top:10px;
background: #999999;
}.container #border {
width:50px;
height: 45px;
margin-top:5px;
}.container #border div {
width:50px;
height: 40px;
margin-top:5px;
}IN HTML:
<div class=”container”><div id=”border”><div>
<!– ENTER YOUR CONTENT HERE –>
</div></div></div>
Doing this may seem like a pain, but if you design from the start using this technique, you will not regret it!
