Not having IE7 support is a pretty nasty limitation though, if you're developing a commercial web site.
I wonder if anyone wrote an IE .htc script to ix this dynamically.
* { box-sizing: border-box } FTW
71–80 of 90 posts
Re: * { box-sizing: border-box } FTW
#72And all those years I was wondering if I was stupid to think that. I'm eager to use it, but as I use Bootstrap I imagine it breaks it ?
Not as badly as you might think! Playing around with the new box model on a test site and on the bootstrap site (via firebug), I only found four noticeable changes in appearance:
- The search form was noticeably shorter and more cramped. I fixed this by adding height: 100% to the interior text input element
- Text inputs are less wide than they should be when you use bootstrap's span classes
- The navbar's vertical and horizontal dividers disappeared. I fixed this by adding 1px of padding to either the side or bottom of the divider, as the case required.
- Side tabs are a less wide than they should be
Re: * { box-sizing: border-box } FTW
#73And all those years I was wondering if I was stupid to think that. I'm eager to use it, but as I use Bootstrap I imagine it breaks it ?
[deleted]
Re: * { box-sizing: border-box } FTW
#74As it's been said in the comments, it's amazing that after years of lobbying IE to change its box model to match W3C, we realize that maybe IE's model made more sense after all.
I've felt for years that the "broken" IE model made more sense. Your element has a height and width, padding pushes inward against interior content and margin pushes outward against exterior content. Glad to see others think this too, I always thought it was just me.
>padding pushes inward against interior content and margin pushes outward against exterior content.
That actually seems the wrong way round to me. If you think about a document, the margin is what separates text from the edge of the page (or interior padding, if you will). Padding, to me, implies an area around an element that other elements can't touch.
Re: * { box-sizing: border-box } FTW
#75Earlier quoted context omitted.
Firefox canvas performance is a joke. You should upgrade to Chrome.
Firefox (10, linux) performance is fine for me; it may be his browser version or something else.
Works fine on my own machine (13, Linux). But that doesn't help people who are stuck on machines where it doesn't. I suppose the code could detect low frame rates and reduce quality or shut down?
Re: * { box-sizing: border-box } FTW
#76Earlier quoted context omitted.
I've felt for years that the "broken" IE model made more sense. Your element has a height and width, padding pushes inward against interior content and margin pushes outward against exterior content. Glad to see others think this too, I always thought it was just me.
>padding pushes inward against interior content and margin pushes outward against exterior content. That actually seems the wrong way round to me. If you think about a document, the margin is what separates text from the edge of the page (or interior padding, if you will). Padding, to me, implies an area around an element that other elements can't touch.
Yes, you're right, that makes more sense. Now let's never bring this up ever again for fear of confusing people some more.
Re: * { box-sizing: border-box } FTW
#77I worked on a project recently where the previous designer did this and it was absolutely maddening . Switching the box model can be useful sometimes, but it makes no sense to me why you would do this globally.
My initial thought is that it only makes sense to do it globally. Two different box models in the same page - now that would be maddening.
Re: * { box-sizing: border-box } FTW
#78Earlier quoted context omitted.
Sure you can change the existing default, that's what people wanted IE to do.
If individual vendors mess up when implementing the spec from the standards body (which they are a member of) then they should have to clean up their own mess. IE did eventually change the default in IE6 and added quirks mode for compatibility with websites designed for Even if the majority of people preferred the IE5.5 box model, it didn't follow the spec and it is therefore wrong. We have standards specifications o…
Even if the majority of people preferred the IE5.5 box model, it didn't follow the spec and it is therefore wrong
Specs should standardize what's generally considered a good idea. They are not written in stone and have no value in and on itself. If IE's old model was consensually better (and I'm not sure it was), the spec should have changed, not the other way around.
After all these years writing CSS, I'm very biased and it's hard to evaluate which is better. I was aware of border-box, but I thought it was Webkit only. Though I probably won't make the switch altogether, I'm glad to know we have a choice.
Re: * { box-sizing: border-box } FTW
#79Earlier quoted context omitted.
I don't know what I did, but after I doodled a bit and scrolled the page around using the middle mouse button, this youtube video popped up over the page: http://www.youtube.com/watch?v=E6x_-xKl-Fg Also the konami code makes the same sort of unicorns appear that were on the video.
Drawing a star causes the video to appear.
I tried drawing every kind of star I know but couldn't get any video to show.
Re: * { box-sizing: border-box } FTW
#80Incredible. I wish someone had told me this a few years ago, would have saved me a ton of grief. Jeremy Keith said it best in the comments: "box-sizing: border-box is the bee's knees."
Well, if you'd found out about it a few years ago you'd plausibly still have felt an obligation to support IE7, and thus been unable to use it.