If you are aligning content in Flash that uses the Stage width or height as a variable (e.g., you want to center a MovieClip) and you do it on initialization (i.e., in code and on the first frame), you may run in to this issue. Here is an image demonstrating what you might see:

Note that in the “before” screen, the content is centered horizontally, while in the “after” screen, the content is only half-visible and appears to be “centered” on the left margin.

If you run a test – output the Stage width to a text field, you’ll see that the width will be returned as 0.

As far as I know, there are two solutions to this problem. If you’re embedding your Flash using swfObject, then make sure that you omit the “scale” attribute. For example, modify the following:

var params = {
    bgcolor: "#000000",
    menu: "false",
    scale: "noScale",
    allowFullScreen: true
};

To something that looks like this:

var params = {
    bgcolor: "#000000",
    menu: "false",
    allowFullScreen: true
};

Alternatively, if you absolutely need that attribute. You can create an “EnterFrame” event listener that detects when the Stage width is greater than 0 and then remove the listener. Here’s an example in ActionScript 2:

this.onEnterFrame = function() {
    if (Stage.width > 0) {
        init(); // Pass to initialization function
        this.onEnterFrame = null; // Clear enterFrame listener
    }
}

<h3 id="header">
    Revised Image Replacement
</h3>

/* css */
#header {
    text-indent: -100em;
    overflow: hidden;
    background: url(sample-opaque.gif);
    height: 25px;
}

This is the Phark method of Image Replacement. Here’s my modification:

<h3 id="header">
    Revised Image Replacement
</h3>

/* css */
#header {
    text-indent: -100em;
    overflow: hidden;
    background: url(sample-opaque.gif);
    background-position: 100em 0;
    height: 25px;
}

Of course, in its current state it won’t work with anything, except Internet Explorer 5 (PC). So, we throw in the Simplified Box Model Hack:

<h3 id="header">
    Revised Image Replacement
</h3>

/* css */
#header {
    text-indent: -100em;
    overflow: hidden;
    background: url(sample-opaque.gif);
    background-position: 100em 0;
    bac\kground-position: 0 0;
    height: 25px;
}

Knowing that browsers position images to the top and left by default, I thought that Internet Explorer 5 (PC) was probably setting the image where the text was being forced (or, indented), etc. Of course in a real world situation, it would probably be better to use a conditional comment to change the background-position for Internet Explorer 5 (PC) instead of resolving to hacks.

Update:

It turns out that this method doesn’t resolve the issue in Internet Explorer 5 for Macintosh; but, using “overflow: visible” will accomplish the same result. So in order to get this to work for the Mac version, we’ll need something like this:

<h3 id="header">
    Revised Image Replacement
</h3>

/* css */
#header {
    text-indent: -100em;
    background: url(sample-opaque.gif);
    background-position: 100em 0;
    bac\kground-position: 0 0;
    height: 25px;
    line-height: 25px;
    overflow: visible;
    /* Hide from IE 5 Mac \*/
    overflow: hidden;
    /* End hide from IE 5 Mac */
 }

And that should take care of any issues in Internet Explorer 5 for Macintosh. You’ll notice that I’ve also added a “line-height” declaration. The reason (and this may be obvious) is because if the line-height is not set to the same value as the declared height (in this case 25px), the browser will render enormous spaces below the replaced heading.

If you don’t want to use hacks within the actual stylesheet, you may want to check out Tantek Çelik’s IE5/Mac Band Pass Filter. Of course, some may wonder how using a “filter” is that much different from a “hack”, but that’s outside the scope of this post.

To get to the point, I put together a ul element that would display within content blocks but not clear other ul elements. The code:

ul {
float: left;
clear: none;
display: block;
min-width: 40%;
padding: 0 20px 0 0;
}

Because floated elements are required to have a width, I opted for a percentage and went with it. This worked perfectly in Firefox, but when I tested it in IE, the second ul wrapped and appeared below the first. I tried lowering the width to a smaller number, and after several successive attempts, I finally ended up with:

ul {
float: left;
clear: none;
display: block;
min-width: 20%;
padding: 0 20px 0 0;
}

I’m not sure why the larger widths did not work in IE, but making it smaller seems to have solved the problem.

As soon as I finished, I decided to add p tags above and below to make sure everything worked properly in context. Upon doing so, I discovered that because the ul elements were floating, the paragraphs would, as a result, wrap around them. No problem, I just cleared the p tags:

p {
clear: both;
}

Viola; client/user controlled multi-column floated lists. Now whenever the client/user wants to float one list next to another, all that is required is to insert something like this into the body:

<ul>
<li>list item one </li>
<li>list item two </li>
<li>list item three </li>
</ul>
<ul>
<li>list item one </li>
<li>list item two </li>
<li>list item three </li>
</ul>

Or as he/she would see it:

• list item one
• list item two
• list item three

• list item one
• list item two
• list item three

The CSS will automatically cause the lists to float alongside. An added bonus is that if any particular list element happens to exceed the maximum width of the parent element (the body) the second list will automatically wrap below the second.