In keep CSS easy I slightly changed the box model hack from Tantek to make it more easy to use. Now I found a solution, which lets all browsers use the IE box model. Yes, the easy box model... IE6 still has to be in quirks mode. You could do this with a PI or with a simple comment before the DOCTYPE. So either this:
<?xml version="1.0" encoding="iso-8859-1"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
or this:
<!-- IE is now in quirk mode! --> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
That wasn't so difficult. I found the solution (for an easier box model) on the website of Peter-Paul Koch: Box model tweaking. All you need to do is add some extra CSS to the elements you want to apply this on:
div{
-moz-box-sizing:border-box;
box-sizing:border-box;
}
That was fun and especially useful for when you are making a flexible layout with percentages for example. Something different; you know that IE has this default scrollbar showing on the right of your layout and IE also applies this ugly thing on your textarea. Fortunately, you can switch it off!
html,body,textarea{ /* html for IE6, body for IE5.x */
overflow:auto;
}
I also constructed a couple of basic templates (available in XHTML1.0 Strict only at the moment):
div}
By adding .phps to the end of the file, you can view all the PHP I used (only for the MIME-type and character encoding). O, and since this weblog is also about Markup:
Can somebody tell me why the W3C doesn't finish XFrames? I want to file (Bugzilla) bugs about XHTML2... :)
Anne, I'm quite amazed that you didn't know of box-sizing. Well, one can't know it all.
Where did you get the information from? The W3C docs?
Well, I must confess I already knew it, but while I was checking Peter Paul Koch's CSS2 section, I remembered it: Box model tweaking (also mentioned in the post).
Not sure if I'm going to use it, but when there is need for a page with widths of percentages this certainly can be useful.
O, if you have time: Create Web applets with Mozilla and XML. That is just absolutely great! So easy to create and so powerful :).
Probably not that interesting, since it's covered here already, but I'm referring to it anyway: Width @ DHTMLCentral.com. Topic about this very subject.
Why must Xframes be finished? It isn’t in XHTML 2. If you think it is, please let me know where you read this, because I think it shouldn’t.
You are right. Just read it yesterday evening I think. It is not there. It is also not clear yet of XForms will be used or not. Opera Software has made an alternative proposel, which is based on HTML forms. Thanks to bugzilla bug 97806 I found its location: XHTML Module: XForms Basic.
I already send some feedback to Ian Hickson about it. I really like this, though a couple of things should be changed. You can also read some more about not implenting XForms in browseres here:
A general warning concerning the centering templates:
It is always worth noting that the "50%, negative margin" method for centering is only "safe" for small boxes. But, how small?
Well, consider an 800px box. If the user's browser is only 700px wide, the effective left edge of the box will be fifty pixels to the left of the window. Unfortunately, most browsers don't provide a scrollbar for negative content, resulting in a usability flaw for smaller displays.
On another topic, it looks as if the W3C is favoring box-width/height over box-sizing, which means that it will continue to be invalid code. Any thoughts, or does this even matter?
You are absolutely right that this way of centering is not the best solution, though it is the one that works cross-browser. Mozilla (and maybe others) supports this solution (which has no usability issues):
div#center{
position:absolute;
top:0;right:0;bottom:0;left:0;
margin:auto;
height:200px;
width:200px;
}
I like that solution, but sometimes you have to think about crossbrowser solution (I'm the first to admit that this site is not an example of that :)). Thanks for pointing me/us to the CSS3 specification: The box model: 9. The 'box-width' and 'box-height' properties (or 'box-sizing'?), this is certainly something we should think about when using this techniques.