CSS Box Model

Hi

How the CSS box model works has been explained by others many times already. If you already know how the different box models work and how to handle Internet Explorer, there is nothing new for you here. I’m just explaining these as one more reason that why I hate IE.

The CSS box model diagram
Here is a simple diagram showing how the dimensions of an element are related in CSS:
box-model

The W3C Box model
First a look at the the W3C box model, which is used by all standards compliant browsers and by Internet Explorer 6 and later if the circumstances are right. In the W3C CSS box model a block level element’s total width is calculated using the following formula:

total width = margin-left + border-left + padding-left + width + padding-right + border-right + margin-right

The IE Box model
The IE Box model is similar except for one important difference: paddings and borders are not included in the calculation:

total width = margin-left + width + margin-right

This means that if the element also has horizontal padding and/or borders, the actual content area will shrink to make room for them.

Solution:
1. Avoid situations that cause problems – You can simply avoid specifying both width and padding or border for the same element.

2. Insert extra markup – The outer element (div) controls the width, and the inner element (div) contains the border and padding.

3. Use conditional CSS – We can simply put condition like:

<!--[if lt IE 6]>
<style type="text/css">
#content {width:250px}
</style>
<![endif]-->

One of the reason that "why I hate IE"

Recently, I got strange issue with showModalDialog and IE 7/8. Actually I want to implement some gradient background for button. For gradient, we need to define CSS property as per browser, so I have set gradient background for major browser like Chrome,Safari,FireFox,Opera and IE.
Have a look my button CSS looks like:

.myFancyButton{
	background: #2491c6; /* Older browsers */
	background: -moz-linear-gradient(top,  #7ABCDC 0%, #2491c6 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7ABCDC), color-stop(100%,#2491c6)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #7ABCDC 0%,#2491c6 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #7ABCDC 0%,#2491c6 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #7ABCDC 0%,#2491c6 100%); /* IE10+ */
	background: linear-gradient(top,  #7ABCDC 0%,#2491c6 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7ABCDC', endColorstr='#2491c6',GradientType=0 ); /* IE6-9 */
}

All things working fine, but after implementing this CSS to my project I found the strange issue from client that button didn’t work with model window. For pop-up window display, I’m using showModalDialog and I identify that button is working only when I click on buttion text value. It’s not work if I click inside the button but not on buttion text value. At this time I check same in FireFox and it’s working well but in IE7/IE8 I don’t know why it’s not working. And that is the reason I hate IE.

After some workaround on this and I found that if I’m removing all browser specific CSS property for Chrome,Safari,Opera, it’s works well in IE. So, now my buttons CSS looks like:

.myFancyButton{
	background: #2491c6; /* Older browsers */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7ABCDC', endColorstr='#2491c6',GradientType=0 ); /* IE6-9 */
}

There are many reasons to hate IE but here I have just mention one. If you have any reason to hate IE, please do comment below……