switching to internet explorer's box model
In CSS/HTML it seems logical to me that the width of an element should be independent of the padding applied within it. If I change the amount of internal padding within an element, I don't want the width of the element to be affected. Unfortunately, the W3C has decided that width is dependent on padding, and the minority browsers (Firefox, Opera et al) render in this illogical style.
Even though IE5PC gets the box model WRONG according to the W3C spec, I actually like their way of doing it better. It makes it MUCH easier to add up percentages. With the spec's version of the box model, if I have two boxes side by side of equal width, I could set them at 50% each and be happy. But... if there is a border, a margin or some padding involved, I have to decrease that 50% value to account for those elements. However, those elements are generally NOT calculated by percentages, because it just doesn't look right. How do you subtract (2px) + (10% * 2) + (4ex * 2) from 50%? Yeah... exactly... you can't
revjim.net
Internet Explorer's box model makes much more sense to me, and thankfully there is a way to switch the minority browsers to this mode of rendering. Insert the following snippet of CSS into your stylesheet and your box model woes are over:
* { box-sizing:border-box; -moz-box-sizing:border-box }The box-sizing declaration is part of a proposed W3C CSS3 spec, and has been implemented in Opera, IE for Mac, Mozilla and Firefox. As with most of their CSS3 support, Mozilla have attached their dastardly vendor-specific -moz- prefix.
[some alternatives]
06/07/05 06:31pm
(4 years, 7 months ago)
9 comments
add photo
OK, let's see...CSS3 box model...WD1. Not CR and certainly not R. Because of this, browser vendors are encouraged to only implement support if they put a vendor-specific prefix in the property names. The Mozilla Foundation has done the right thing and you want to have a poke at them for it? What a way to show your knowledge of CSS.
03:07pm
Lol. I have thought all the long that IE had more logical use with the padding and width issue. Padding is inside and should not affect what is outside..
Mark Cīs comment is quite dull. Even with a standard the browsers show wrong. There are many sites that does not work in IE mac for instance, especially some booking sites.
Here is a better scenario:
When you build a house with the width of 10 meters and you then decide you want to add some isolation inside. I am sure the width of 10 meters doesnīt increase, Does it??. It will however decrease the space inside of the house.
Thatīs the logic
I also hate when I want to add some padding to an element and the whole element is moved away from the edge. Wow what a standard
05:08am
Keep up the good work minion.
07:40pm
whilst the idea of the way IE renders the box model may feel a better way, what's the point of having standards?
How would you feel about this scenario:
You have just found the perfect job, really good money and and you can work from home everyday, so you go to apply for an interview and they only accept online (https ;)) applicants.
So you go to their site and opps, the whole page is completely messed up, and you cannot even fill out the form (due to some non standard coding) or they show a pop up message saying we only support browser Foobar.
or Scenario 2:
They only accept *.foobar format and the only problem is the only program that can create or even read this format is on another operating system and you have to buy the OS and then word processor at a silly price and you cannot afford it.
But if they used a standard file format, say *.foo, they you could create the document on your current word processor, as it supports standard formats.
How would you feel now about creating your own standard?
Mark
01:40am
In some cases that makes sense, however I see the padding for a box model is not part of the content, so changing the padding will then change the width of the element not the content. To each thier own.
02:31am
If it makes sense then why does IE6 put padding on the inside of the width, but not the height.
10:34pm
What, like the dastardly vendor-specific "document.all"?
Nick
12:50am
Let's suppose you need to create an overlay div with fixed *content* width, so that padding and border affecting content width is undesirable, and your width should be in percents. How could you do it in IE? It doesn't even support box-sizing!
08:34pm
You don\'t like the -moz- in tags because they are browser-specific, yet you are suggesting that Firefox revert to a format which only the Trident rendering engine uses?
05:14am