Thirteenth Parallel /archive/margin-fix/
UPDATED: 13.04.2002
The elements should no longer "jump" to their new position. All the styling is fixed before the page loads. The only constraint is that the script declaration be put after all style declarations.
In Internet Explorer 5.x and backwards-compatible-mode Internet Explorer 6 on Windows platforms, the automatic horizontal margins are not implemented correctly. Setting the various forms of automatic left and right margins has no effect on the desired element. This script will fix the bug in Internet Explorer without any modification to your HTML or CSS, making your pages display correctly. For more details, check out the resources (see later).
NOTE: This is not a workaround which requires custom CSS or the like. It will take a document that is setup with the correct CSS without any extra work by the user aside from adding the script to the page.
This script is still considered beta, and changes can be made at any time.
The fix, made for Internet Explorer 5 & 6, will setup the margins for every element in the document that uses margin : auto, margin : value auto, margin-left : auto & margin-right : auto, margin : value auto value, or margin : value auto value auto.
If Internet Explorer 6 standards-mode (or any other browser) is viewing the page, the script will have no effect or cause any errors.
The fix works for not only top-level elements but nested elements as well (see examples).
Note: This will only work for styles declared in stylesheets. No style attributes in HTML elements will be parsed. The script supports inline, linked, and imported (@import) stylesheets.
The fix is easy to implement. Just download (see later) the script and link to it with a script tag in the head of the document after every style declaration (inline, imported, & linked). Example:
<script src="IEmarginFix.js" type="text/javascript"></script>
It parses the stylesheet and automatically applies the fix to the margins (even when resized). A sample document with an inline style declaration would be as follows:
<html>
<head>
...
<style type="text/css">
.myElement
{
width : 30%;
margin : auto;
background : red;
}
</style>
<!-- all style declarations above this line -->
<script src="IEmarginFix.js" type="text/javascript"></script>
</head>
<body>
<div class="myElement">
... Content ...
</div>
</body>
</html>
The examples are viewable here.
Download the file here: IEmarginFix.js
For detailed information on defining margins, see the W3C CSS2 Reference: Box Model.
Check out some of the W3C's CSS tests here (orange boxes) and here (see the gray boxes) for some samples of automatic margins.
With the release of Internet Explorer 6.0, the CSS support has vastly improved and the various forms of margin : auto is now supported. For information on enabling standards-mode in Internet Explorer 6.0, check out Fixing your site with the right DOCTYPE from A List Apart.
This document uses valid CSS. For this script to work properly, valid CSS is recommended.
It is always good to have valid HTML as well.
The script was written by David Schontzler and is copyright 2002.
Please report any bugs here.
May be freely distributed under the GNU General Public License.
Permanent URL: http://www.stilleye.com/scripts/marginfix.