Fw: Box Model Fix

I thought this could be of interest to this list as well, an attempt to ease
the transition to the W3C CSS Box Model instead of the IE Box Model.

Let's keep the gory details and discussions on css-dicuss ;)


----- Original Message -----
From: "Thor Larholm" <css-discuss@jscript.dk>
To: <css-discuss@westciv.com>
Sent: Thursday, October 03, 2002 3:15 PM
Subject: Box Model Fix


> The faulty box model in Internet Explorer has long been haunting CSS
> developers. In attempts to circumvent this so that it may appear as the
W3C
> Box Model, many flaws and hacks have been discovered and used (Tantek,
SBMH,
> etc.). These all require that the CSS developer perform manual
calculations
> on how his paddings and margins affect the width and height under
different
> CSS rendering engines, and then implement those in tedious, easily-broken
> hacks that mainly depend on CSS rendering engine flaws.
>
> I propose a different approach. Instead of wasting time on tedious
> calculations which we often forget to perform and (sometimes)
nonvalidating
> hacks that has unexplained and bizarre sideeffects, let us for a minute
> forget about faulty box models. Let us specify our widths, heights,
paddings
> and margins according to the W3C Box Model, according to the CSS
standards.
>
> Then, let us include a script that will automatically correct any
> differences there might be between the W3C Box Model and the IE Box Model
> (or whichever faulty box model) - if, and when, needed.
>
> The following page [1] demonstrates this principle. It has a collection of
> boxes with different widths, heights, margins and paddings - all specified
> according to the W3C Box Model, in all some simple demonstrations of how
the
> box model works. After this, it has a reference to our correction script.
>
> Notice something? It looks the same in IE4+, including IE5, IE5.5, IE6
(both
> standards and quirks mode ), NS6+/Mozilla (both standards and quirks
mode ),
> Konqueror and Opera.
>
> XHTML 1.1 test document [2]
> HTML quirks test document  [3]
>
>
> So how does it work? There are 2 functions, FixBoxModel and
> FixBoxModelStyle. FixBoxModel iterates through all CSS rules in all
> stylesheets, then calls FixBoxModelStyle with each rules style object as
> argument. FixBoxModelStyle then calculates the proper box size.
>
> FixBoxModel is called automatically right after it is inserted, so just
put
> the script right after your style declarations and forget about it, and
> you're done. If you want to, call it onload or whenever - it will only
> correct the box size once. That is, unless you specify the bForce
argument,
> which forces it to recalculate (for advanced users only, if you have
> dynamically changed padding and margin). This also means that any inline
> styles will not be corrected, only those specified in STYLE and LINK
> elements. Maybe I should remember to check imports in the next version,
but
> for now this will suffice as a proof-of-concept demonstration.
>
> If you want to correct elements that have inline styles, just call the
> FixBoxModelStyle function with the elements style object as argument.
>
>
> So what now? I like the concept and it WorksForMe(tm). If you like the
> concept and/or just feel like helping me out, then test this in the
browsers
> available to you and tell me about your results so that I can extend the
> list. I am especially interested in how this works on Mac IE, as I have no
> Mac available.
>
> I would also not use this on a commercial site just yet, as it needs more
> testing and a 1.0 release first (if ever). I also have no idea if anyone
> made this before, so a disclaimer on that as well.
>
> [1]
> http://jscript.dk/Util/BoxModelFix/
> [2]
> http://jscript.dk/Util/BoxModelFix/boxmodelfix.html
> [3]
> http://jscript.dk/Util/BoxModelFix/boxmodelfixquirks.html
>
>
> Regards
> Thor Larholm
> <URL: http://www.jibbering.com/faq/> FAQ for comp.lang.javascript
> <URL: http://jscript.dk/unpatched/> Unpatched IE vulnerabilities
>

Received on Thursday, 3 October 2002 09:19:19 UTC