Category Archives: XHTML/CSS

Internet Explorer, Flash, Alignment Gotcha

I ran into a rather annoying issue the other day related to content alignment in Flash; as usual, this problem exists exclusively in Internet Explorer. To be more specific, it is an issue with how the Flash Player ActiveX control is written.

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
    }
}

Phark Image Replacement (Modified) for IE5

When it comes to image replacement, I tend to use the Phark method; I won’t go into the reasoning behind my preference, but if one were interested in the various methods, etc. I would recommend Dave Shea’s Revised Image Replacement article. Unfortunately one of the pitfalls of the Phark method is the fact that it fails in Internet Explorer 5 (PC). Today, I have an ammendment to this method, which resolves the problem. Take the following example:

<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.

Liquid Multi-column Floated Lists

Every now and then I’ll design a web site for a client that incorporates a multi-column list. Typically this list is on the homepage, so we would create a module that would allow the client/user to enter in values in a textfield and then a server-side language would render the page upon request. Last month I decided to find a more efficient method, one that could be used repeatedly and would not require a custom interface to be built just to use it. Of course the WYSIWYG editor that is built into our CMS allows the client to create a two-column table that can be used to serve the same purpose, but that method assumes that the client/user is familiar with the process; which is rarely the case.

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.