About

Stan is a single Javascript file containing several pre-IE9-compatibility libraries. I put this together while working on Smood and thought it would be helpful to you if you don't want your modern CSS layout to look like a hot mess in old IEs.

Stan contains:

• IE9.js and ie7-squish.js for fixing many HTML and CSS issues and making transparent PNGs work correctly

• DD_roundies for border-radius support

• Floatacious for CSS2.1 float rendering

<!--[if lt IE 9]>
  <script type="text/javascript" src="http://stan-js.googlecode.com/hg/version/0.1/stan.min.js"></script>
<![endif]-->

Stan and Floatacious will trigger hasLayout on elements. This is mostly harmless, but it's known to reset the margins of surrounding elements in unpredictable ways. Floatacious does its best fix these adverse effects as well.

Many thanks to Drew Diller, Dean Edwards and John Resig for their respective works of DD_roundies, IE7.js, and jQuery.

DD_roundies Auto-loader

By using Stan, you can take advantage of DD_roundies' awesome power without having to include layout specifications in your code. On page load, Stan scans all linked/imported stylesheets, style elements and style attributes for the CSS3 border-radius property and calls DD_roundies.addRule with the discovered CSS selector-value pairs.

Floatacious

Floatacious fixes the rendering of floated elements in Internet Explorer 5, 6 and 7:

• Auto-width floats containing oppositely floated children are properly shrink-wrapped instead of being stretched to 100% of the available width, as if they are unfloated. While IE's behavior is technically compliant with CSS2, it disagrees with CSS2.1 and also the expectations of most web developers.

• Floated elements that are the next sibling of inline elements are re-sorted so they wrap text correctly instead of being cleared (see #Options and FLOAT_RESORT).

Floatacious is included in Stan, but is available as a standalone script in the source repository. For best results, I recommend using Floatacious with IE8.js and ie7-squish.js. Check out #Usage and the IE7.js project page for more information.

PNG

Stan uses IE7.js for transparent PNG support:

The script only fixes images named: *-trans.png

If you want the fix to apply to all PNG images then set a global variable as follows:

var IE7_PNG_SUFFIX = ".png";

You must set this variable before including the stan.js script. Alternatively, you can set the variable inside the stan.js script element:

<script src="stan.js">IE7_PNG_SUFFIX=".png";</script>

The suffix will ignore query string parameters. For more fine-grained control you can also set IE7_PNG_SUFFIX to a RegExp object. If you want to use an alternative PNG solution then set the suffix to something that cannot possibly match:

var IE7_PNG_SUFFIX = ":";

By default, the PNG will be stretched (this simulates tiling). If you want to turn this off then set the no-repeat property as follows:

div.example {
  background: url(my-trans.png) no-repeat;
}

Unfortunately, the transparent background image cannot be tiled (repeated) using background-repeat. Nor can it be positioned using background-position.

Usage

Including Stan

To use Stan, put this in your HTML:

<!--[if lt IE 9]>
  <script type="text/javascript" src="http://stan-js.googlecode.com/hg/version/0.1/stan.min.js"></script>
<![endif]-->

Including Floatacious

To use Floatacious, put this in your HTML:

<!--[if lt IE 8]>
  <script type="text/javascript" src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE8.js"></script>
  <script type="text/javascript" src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/ie7-squish.js"></script>
  <script type="text/javascript" src="http://stan-js.googlecode.com/hg/version/0.1/floatacious.min.js"></script>
<![endif]-->

(Don't include Floatacious or any of the IE7.js project scripts if you're using Stan; They are included stan.js)

Floatacious goes to work immediately when page content is loaded, but, you can trigger the Floatacious fix manually in your code by calling the floatacious() global function.

Options

Stan and Floatacious options can be set by either declaring a global variable before script inclusion, or, in the script element itself.

If you're including Stan and want to set Floatacious or IE7.js options, for example, declare the option variables in your Stan script element:

<!--[if lt IE 9]>
  <script type="text/javascript" src="http://stan-js.googlecode.com/hg/version/0.1/stan.min.js">
    IE7_PNG_SUFFIX = ".png"; // Enable transparency for all PNGs
    FLOAT_RESORT = false; // Disable re-sorting
  </script>
<![endif]-->

Stan options

(These have no effect if only Floatacious is included as a standalone script without Stan)

STAN_ROUNDIES

Enables the DD_roundies auto-loader if true.

Default is true.

STAN_FLOAT

Enables the Floatacious auto-loader if true.

Default is true.

Floatacious options

(These have no effect if Stan is included and the STAN_FLOAT option set to false)

FLOAT_RESIZE

Enables automatic recalculation when the browser window is resized if true.

Default is true.

FLOAT_RESORT

Enables simple re-sorting of floated elements around text for better compatibility with IE's clearing behavior if true.

Default is true.

FLOAT_PLACEHOLDER_TAG

Tag name used for re-sorted element placeholders.

Default is "FLPLACEHOLDER".

FLOAT_PLACEHOLDER_CLASS

Class name used for re-sorted element placeholders.

Default is "" (an empty string).