Field Notes Inside an Integrated Communications Agency

I'd like to share something we learned last week in our "Say Hello to HTML" class taught by the web wizard himself, John Romano. Naming HTML files appropriately is just a little something that can help out in a big way. So when you're naming your files and your folders, remember these key things.

• No spaces, punctuation or special characters.
• No periods. This helps prevent broken links.
• No underscores, use hyphens instead. Google will identify separate keywords between hyphens.
• Use all lower case, people are less likely to make typos.
• No fancy naming conventions, use direct labels that reflect the content. This will help everyone identify a file's content before even opening it. Also, Google likes having a file name that is related to the content.
• Remember: save your files as close to the root directory/index as is feasible. The farther away your files live, the less visibility they get.

If you do all of this, not only are you making our developer's lives a little easier, you'll get a little Google love to boot.

If you've been into the development game for any time at all, chances are you've encountered the famed Suckerfish dropdown navigation system at some point. I have successfully employed this chunk-o-brilliance - and it's successor, Son of Suckerfish - more than a few times. I recently had cause to implement dropdown navigation over Flash content, and was dismayed to see Safari comPLETEly freak out and throw a tantrum, causing my dropdown menu items to flicker in and out of existence. After much poking about, I decided that Safari must just not handle z-index as well as other browsers. I set up a little javascript function to detect the user's browser, and point to a separate CSS file if Safari was encountered.

It was only after pausing for a moment of silent reflection for all those users who would never see my handy navigation that I thought to try to find a similar case online. I started at the top of my bookmarks. Four sites in, and right there, at the top of Adobe.com , was my answer.

In order to make all other browsers behave when rendering your dropdown nav over Flash content, all you have to do is a) make use of the wmode tag for your Flash div, setting it to either transparent or opaque, and b) assign a z-index value of 2 to the block-level element containing your dropdown menu. Safari balks. To make it behave, you have to burrow down into your nav CSS and add z-index tags to every nested element, including the links:

#navdiv {
    z-index:2;
} 

#navdiv ul {
    z-index:3;
}

#navdiv ul li {
    z-index:4;
}

#navdiv ul li ul {
    z-index:5;
}

#navdiv ul li ul li {
    z-index:6;
}

#navdiv a {
    z-index:7;
}

Presto! Change-o! Safari's nasty flicker is tamed. Lesson to be learned here: take advantage of Firebug , and don't worry about reinventing the wheel. I was able to find a working example of what I wanted, and Firebug gave me the behind-the-curtain insight needed to make it happen. If you are not currently in the know on the incredible development resource that is Firebug, I implore you - drop everything and go get it!