Avoiding box model problem

Hi all,

According to diverse forums (as well as Ruud suggested in my other post http://www.typolight-community.org/v...7&t=1166#p4506), avoiding box model problems should be easy if you use a div-container to set the width and an sort of inside container for the margins, borders and padding...

Eample:

Code:

---

<div style="width:100px;">   
        <div style="margin:10px; border:solid 1px red; padding:5px;"> Displays the same in most browsers, total width 100px</div>   
</div>

---

This should display the same in most browsers...

As I use the gridpx.css system in TL, I cannot see how to implement this approach in a proper way. I think it can't be done without extending the core to set content elements also with an .inside div like that is implemented within #left and #main....

Do I understand this correctly or do I oversee something here?

Thanks all
Paul

Hi Paul,

The most safe solution is to avoid having a width and a padding declaration for the same element. So you could use the .inside div and the classes within this div to create a box model that's working correct all the time. See the pictures in the wiki I mailed you.

You could also make sure IE is not switching to quirk mode. The problem only persist in quirk mode. That's why I told you to validate your pages. If there is any error you are switched to this mode, meaning the box model is not correctly interpreted.

How to avoid quirk mode can be found in the same wiki. For everyone here is the link:
http://en.wikipedia.org/wiki/Interne..._box_model_bug

Hi Ruud,

I fully understand what you are saying (I think), but usings TL, I cannot validate because it fails on media.css, which is part of TL. The xhtml validates 100%...

What I suggest after some digging, is that even in quirks mode, the bug won't be triggered if you set the width to a wrapping div and padding and margins in a inner div INSTEAD of setting them to the same elements. You pointed me in that direction, and it appears to be true....

Now, using the TL gridpx.css which sets the box width and margin with a class at the same level is not going to avoid the box model problem... What I want to know, if there is a way to generate a wrapping div for the width an leave margins and padding to it's children....

Thanks again for thinking with me....

Paul

Seems like a lot of work... Why not check out http://www.quirksmode.org/css/quirksmode.html and make sure you never enter quirks mode.

Is that gridpx system that great? I should check it out then, but I've never used it. The only stylesheets I use are my own and that gives maximum flexibility and control in most situations. :P

Agreed, Vera! By hand-coding everything first it's much easier to make sure you don't have any CSS implementation issues when it comes time to port the templates over into TL.

I haven't looked into gridpx.css myself, but I've used http://960.gs on a few projects.