New media has met its match.

Internet Explorer 6 is the bane of any web developer’s existence. Unfortunately it still has a grasp on the browser market share. And when you’re doing work for law firms, pharmaceutical companies, or any industry whose target customers are more likely to have older equipment, those few people who still use IE6 become pretty important. Fortunately it’s not that hard to make a website that looks almost identical across every browser. Here are my list of fixes for the most common style related problems I’ve come across while testing in IE6.

• In IE6 the margins are doubled for elements that are floated and have right or left margins. To fix this simply add display: inline to the styles of that element.
• PNG transparency is not natively supported in IE6, but sometimes you need images that have feathered transparency. Use the script found here to solve this: http://www.twinhelix.com/css/iepngfix/
• Sometimes absolutely positioned elements that are next to each other in the HTML will disappear in IE6. Surround each with a dummy <div> tag to fix this. See this link for more info: http://www.brunildo.org/test/IE_raf3.html
• When using z-index, logically you would apply the higher index on the element you want above and a lower index on the element you want below. However in IE6 you need to put the higher z-index on the containing block otherwise you may run into issues. So if you have a main container, and a nav container with a <ul> and you want the <ul> on top (for example if you were making a drop down) put the higher z-index on the nav container, not the <ul> itself.
• You may notice a <div> with a small height that has no margins or padding has an extra margin under it or is larger than the specified height. Set the <div> styles to font-size: 1px; to fix this. If the <div> needs to be one pixel high, you may not be able to get the font small enough. Instead, try using a 1px border on the <div> to achieve the desired effect.
• Use this resource to view how a page looks in different browsers. It only returns a screenshot so there is no functionality, but it can be helpful just to see how the static layouts are flowing: http://ipinfo.info/netrenderer/
• Looking to get fixed positioning to work in IE6? Try this solution here: http://ryanfait.com/position-fixed-ie6/
• You can download a standalone version of IE6 for testing from here: http://browsers.evolt.org/?ie/win32/standalone (click “ie6eolas_nt.zip” to download). When I tried to run this through Parallels on my mac, I couldn’t get it to connect to the internet, but comments in other forums suggest that it does in fact work. At the very least you can test local files this way.

Share your tips and tricks in the comments.

Becoming proficient in programming ActionScript in Flash takes more than spewing object-oriented buzzwords and writing complex classes only decipherable to elite Flash geeks. In my opinion, there are three lost arts in Flash programming; in this article we’ll talk briefly about commenting.

How could such fundamental techniques as these actually be on the verge of extinction, you ask? The answer is obvious: Amidst the daily whirlwind of demanding clients and looming project deadlines, it’s easier (and faster) to code projects without taking the time to include explanations for each line of code you type.

The reality however, is this: The time you take up front to properly comment your code and add meaningful trace statements within your ActionScript, the more time that will be saved when you revisit this file in 2 weeks, 2 months or 2 years. It also serves as the key to other developers who may need to jump in on your project or make updates in your absence. If you’re already commenting your code, I applaud you and grant you the permission to skip the rest of this article and spread the gospel.

Commenting Your Code
Commenting your ActionScript should be second-nature. It’s probably the easiest element you can contribute to your Flash application. There are countless techniques and preferences on how commenting should be formatted. The most important aspect of commenting is that you are clear and concise, so that your functionality will make sense to someone else (and even yourself) later down the road. Comment every variable, function and loop in your application so it reads fluently as a step-by-step guide to how your brain works. Also make sure you use variable and function names that make sense (one of the ‘lost arts’ to be covered in a subsequent article).

While programming your app, it’s helpful to keep the following in mind:

• Will someone else be able to understand how I programmed this app?
• In 2 weeks (months, years), will I be able to understand how I programmed this app?

Wow, that’s a short list. That’s because commenting should be an integral part of your workflow. Taking the extra time to type a few comments will save you (or someone else) their time and their sanity, and make you look like a well-balanced, ‘big picture’ oriented Flash programmer.

This article will demonstrate how to create an animated rollover drop down menu using HTML, CSS, and jQuery. Take a look at the demo to see the final result, or download the files directly.

Tested on
PC: IE6-8, Firefox; Mac: Safari, Firefox, Opera

HTML Structure

Each navigation menu is a list that sits inside a div with the ID nav. Give the list a class of menu_body and an id of nav1 for the first one, nav2 for the second, and so on. The naming here is important not only for the styles, but because the jQuery functions look for the “nav#” items. Also, give the first list item the class of menu_head. This is the item that will remain when the navigation is collapsed. Giving it a class will allow you to style it differently if necessary.

Styles

The styles is what you’ll want to start customizing for your needs. You’ll want to update the #nav with the width and height of your navigation bar. This is the container for the whole navigation so you can change margins or positioning as needed.

Next you’ll want to update the width in the #nav ul section. This is the width of the nav item in the menu as well as the drop down. You’ll probably want to change the background color too. You’ll notice that the visibility is set to hidden. The reason why will be explained in the jQuery section.

Setting #nav li to float left fixes a bug in IE6 that adds extra spacing between each list item.

Again, change the width in #nav a to the same as the width you changed in #nav ul. Adjust color, padding, etc as needed.

#nav ul a:hover adds the rollovers effects to the each navigation link, and #nav li.menu_head a and #nav li.menu_head a:hover override those styles so you can change the behavior of the first navigation item.

jQuery Functions

You should only need to modify 2 variables in this file unless you want to customize the functionality. startingHeight should equal the height of your #nav div. This is the height that the mouseovers will return to on mouseout. The speed controls how fast the animation runs and can either be one of the jQuery standard strings “slow,” “normal,” or “fast” or a number in milliseconds.

When I initially created this I came across a problem where the lists would have slightly different heights in different browsers. However, since I am animating the heights I needed to know those specific values. I initially tried solving this this by having the navigation start fully open, grabbing the heights of each list and setting the heights back to the value for the collapsed nav. This worked, however there was sometimes a flicker when the page first loaded. Especially if the load time was longer on a slower connection. The solution to this was to set the style of the lists to visibility: hidden which hides the navigation from view but unlike display: none keeps the space that the item take up. So I could grab those heights (the “+8” adds 8 extra pixels to the bottom for extra padding) without anybody seeing the list, reset the heights to collapsed, and once that is finished turn the visibility back on. That’s what the first two lines in the loop do. They add the current height to an array.

The loop starts at the id nav1 and loops through and increments until it finds one that doesn’t exist. It’s important to start the nav’s at 1 and keep them consecutive. The .length attribute returns 0 if an item does not exist ending the loop.

The next section in the loop applies the mouseover and mouseout functions. This applies a stop and and animate function. If you remove the stop and the queue attributes and then test the rollovers a few times you’ll see why. By default jQuery queues animation. The stop in combination with the queue: false prevents this from happening.

The height that it’s using is grabbed from the array by pulling out the number from the “nav#” id. This was the best way I could think of doing it, because I couldn’t figure out how to pass the dynamic variable “i” into the mouseover. If there’s a way to do this let me know in the comments. The mouseout simply returns the list to the original height.

Finally after all of this is set up, the visibility is turned back on. Let us know in the comments if you use this for your website.

Tips:

• Style each menu differently by targeting them with #nav1 etc. in the CSS.
• Replace the text in the menu_head with an image for a graphical navigation.