Earlier quoted context omitted.
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.
* { box-sizing: border-box } FTW
81–90 of 90 posts
Re: * { box-sizing: border-box } FTW
#82Earlier quoted context omitted.
At this point the W3C is in fact working on providing such a thing. "width: calc(50% - 20px)". Works in Firefox and IE. At some point WebKit will catch up, I assume.
I'm glad to hear that, but it's long overdue and the border-box model already solves the same problem with less markup (and most importantly, without creating an implicit dependency between the padding and width styles).
Re: * { box-sizing: border-box } FTW
#83I love you Paul Irish. I was just complaining about this exact same issue about 3 days ago and when I found this article I was like YES HE AGREES WITH ME! Especially when dealing with fluid layouts, this guy is a lifesaver
Yes, trying to do fluid layouts with percents and borders is a huge pain without this. Too bad it doesn't work with IE7 as I'm still seeing about 5% market share from there. But at least it's declining fast. Weird timing - after years of coding I literally found this box-sizing solution today on SO just a couple hours before seeing it here on HN.
Re: * { box-sizing: border-box } FTW
#84Earlier 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.
Re: * { box-sizing: border-box } FTW
#85Re: * { box-sizing: border-box } FTW
#86Re: * { box-sizing: border-box } FTW
#87The W3C box model is IMO one of the worst design flaws in front-end dev. It's a model that doesn't follow that of a real box! When you have padding (stuffed newspaper, peanuts, etc) in a packing box, the actual width and height of the box doesn't change! Border-width(or the thickness of the cardboard) is also included in the box dimensions.
I've only heard very weak reasons in the past for the W3C version and I'm surprised we haven't gotten past it. I think border-box will become more important as we head towards cross-platform responsively designed apps and sites with tons of layout decisions to consider. With simple sites up until now, you could afford the loss of control or the cognitive overhead to figure out workarounds. But now, I don't want to think the unintuitive way every time I'm making a layout decision for different screens.
Re: * { box-sizing: border-box } FTW
#88<3
Re: * { box-sizing: border-box } FTW
#89Where the traditional box model starts to make sense is with fixed-size elements, such as images. Adding padding to an element shouldn't alter the dimensions of the contents within the element.
Yes it should. If you don't want that space to be from within the element, then you should be setting a margin, not a padding. Box analogy: when you add foam padding to a box to protect its content, are you effectively widening the box or reducing the volume it can fit?
Re: * { box-sizing: border-box } FTW
#90Paul is there an answer to this: http://stackoverflow.com/questions/8421533/how-to-obtain-ctr... You'll know, so I am asking it here. Or is it even a right question in the first place?
Answered you on SO. :)
I have learned a lot from your work on Boiler Plate, HTML5 and Modernizr. Let me dig deep into zooming and come up with its results.