<div id="main_nav_top_shadow"></div>

And with CSS I’m giving that div a fixed height and a repeating background image that creates the appearance of a shadow being cast upward on top of my main nav.

#main_nav_top_shadow {
height: 6px;
background-image: url(../images/main_nav_top_shadow_x.gif);
background-repeat: repeat-x;
}

The problem is that IE6 thinks that the empty space consists of text. Empty text, but text nonetheless. So what happens is that whatever the default font size for that particular DIV becomes the height of the DIV, rather than my specified height: 6px; in the CSS. There are 2 fixes for this problem, one of which I’ve been using forever and another I just stumbled upon and which prompted me posting both solutions. Both are fairly easy.

Solution #1
This solution is the one I’ve been using forever. Basically, you just choose a font size that’s smaller than the height you are setting.

#main_nav_top_shadow {
height: 6px;
font-size: 1px;
background-image: url(../images/main_nav_top_shadow_x.gif);
background-repeat: repeat-x;
}

That usually does the trick. But this has always seemed wrong. I can’t say why, it just feels weird. Maybe it’s the fact that I’m setting a font size for no text at all.

Solution #2
This solution I found this week and actually makes more sense to me. It involves using simple HTML comments. And not the [if IE] stuff either. Just a plain simple comment:

<div id="main_nav_top_shadow"><!--Leave this empty--></div>

It does not matter what text you put in there. It’s not any command to the browser or anything. But it works, by darn! I guess IE6 feels more comfortable not having anything in that div, as long as you put a comment there.

Not only does that work, but it is the right thing to do. After all, the next guy to come along and read your code might see an empty DIV and be tempted to remove it because it contains no content. This way you can leave some nice little message pleading the proverbial programmer to leave well enough alone!

The stuff of which I speak includes my favorites. Which consists of an export of my Firefox bookmarks, imported into IE, and then sync-ed into mobile IE.

One of my tricks in Firefox is a bookmark to Gmail without any text as the name of the link so that the favicon itself is the only visible que, and it acts as a simple quick link to my most frequently visited site. It was this shortcut that caused me a lot of grief and at least 4 hard resets to remedy.

The issue was that whenever I went to the “My Device” directory in my file explorer, it would’nt open a directory listing but rather my browser and into Gmail. It seemed as though Internet Explorer had hijacked my file explorer!

Well, apparently a favorite without text does just that in Windows Mobile (version 5 in my case).

For me this was an unfavorable and difficult to diagnose circumstance, but maybe you can use this as some sort of Windows Mobile hack.

Ever get stuck in an endless loop, trying to download video converter, Super? Here’s how to break the loop.

I’ve never once been able to download it using Firefox, so if I were you I wouldn’t even bother trying.

Basically, you need to add the download site to your trusted sites in IE. But wait! I said the download site. Although it may appear that you are downloading directly from the www.erightsoft.com domain, you will actually be downloading from gpl.download.free.fr/Super.html so go ahead and point your browser there now.

Once you are on the right domain, open up your internet options and click the ‘security’ tab. Then hit the ‘trusted sites’ icon and add the current domain (be sure to un-check the option that requires it to be an https site). Now that gpl.download.free.fr has been added to your trusted sites list, change your trusted sites level to ‘Low.’

Now all you need to do is scroll to the bottom of the page and click ‘Start Downloading SUPER’ which will take you to http://gpl.download.free.fr/Superdc.html where you will see a link that says ‘download and use’ near the top of the screen. Click that and it will take you to http://gpl.download.free.fr/S6Kg1.html where you will see the download links at the bottom of the screen. Why didn’t I have you go there to begin with instead of clicking all these links? Well, the good people of erightsoft (or whoever they are) don’t want you to download Super from anywhere but on their site, so they check the referrer of how you got to the download page and if you don’t get there in the order I described above, you will be redirected to the begining and have to start all over.

Happy video converting!

Before I get too far, let me show an updated example of the Gillay method. This example will appear slightly different than the examples in my other post but reflects further discussion that took place within the comments section of that post.

<!–[if IE]>
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase=
"http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab
#version=7,0,19,0" width="780" height="590" id="gilluminate">
<param name="movie" value="gilluminate.swf" />
<![endif]x–>
<!–[if !IE]> <–>
<object type="application/x-shockwave-flash" data="gilluminate.swf" width="780" height="590" name="gilluminate">
<!–> <![endif]–>
<param name="movie" value="gilluminate.swf" />
<param name="quality" value="high" />
<param name="bgcolor" value="#2C676C" />
<p>gilluminate is mostly a showcase of things I have done, things I am doing, and things I can do. It is powered by a combination of HTML, Flash, ActionScript, XML, JavaScript, CSS and PHP and displays my recent websites and artwork.<br />You need the latest free <a href="http://www.macromedia.com/shockwave/download/download.cgi?
P1_Prod_Version=ShockwaveFlash">Flash Player Plugin</a> to view this site.</p>
</object>

Basically what is happening here is that I’m hiding the IE friendly object tag from every browser that’s not IE, and vice versa.

This same principal can be applied when "embedding" Windows Media or Quick Time movies, and probably every other type of object. Here’s an example of using the Gillay method with Quick Time:

<!–[if IE]><object classid=
"clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" width="250" height="140" codebase="http://www.apple.com/qtactivex/qtplugin.cab
#version=6,0,2,0" standby="Loading Quick Time components…"><![endif]x–>
<!–[if !IE]> <–>
<object type="video/quicktime" data="example.mov" width="$width" height="$height" standby="Loading Quick Time components…">
<!–> <![endif]–>
<param name="controller" value="true" />
<param name="type" value="video/quicktime" />
<param name="autoplay" value="true" />
<param name="scale" value="aspect" />
<param name="BGCOLOR" value="#000000" />
<param name="target" value="myself" />
<param name="src" value="example.mov" />
<param name="pluginspage" value="http://www.apple.com/quicktime/download/" />
<a href="http://www.apple.com/quicktime/download/">Quick Time Player</a> required or <a href="#" onclick="window.close();">close this window</a> and select a different format.
</object>

This code will play the example.mov movie in Firefox, IE, Safari, and IE for Mac and will validate on the W3C website

Although this wasn’t a problem in Firefox, Internet Explorer was causing the text box to lose focus and therefore hide suggestions whenever I clicked the scroll bar in order to view lower results. I tried Google’s page and shrunk my window enough that a scroll bar appeared, but Google’s suggestions weren’t dissapearing! What in the world is going on here? After searching through my code for something I might be doing that would cause it, I finally started just simply deleting elements from my page until it worked. It wasn’t until I deleted the Doc Type Declaration at the top of the page that it started working. I checked Google Suggest’s code, and sure enough, there is no DTD on that page.

I’ve been looking at the Flash Satay method of maintaining valid markup using flash (the <embed> tag commonly used for non-IE browsers is no longer supported by current versions of HTML and XHTML). It always seemed a little wacky and time consuming to have to load your flash content into a container .swf and was not appealing to me at all. The Flash Javay method tries to address this problem, but I never liked the idea of using that much javaScript either. I mean, haven’t we spent the past few years trying to come up with a Flash detection that doesn’t use javaScript? The Javay method seems like a step backward, not forward.

Before I share my newly found solution to both problems, let me share this little newly found secret about Internet Explorer that might be useful to you in many other applications other than embedding Flash. Using the following code will only show up in Internet Explorer browsers:

<!--[if IE]>You are using IE!<![endif]-->

Now that we’ve got that out of the way, lets discuss what I’ve dubbed the Flash Gillay method. (Because everyone who comes up with a modified version of the Satay method has given it a new name, I’ve decided to name this one after myself in hopes for fame and fortune!) The general idea is to use the <object> tag exactly as it is commonly used, but to replace the <embed> tag with the Satay formatted <object> tag. Putting the Satay format inside the common format will work fine for browsers that would otherwise need the <embed> tag without any other code to help it out. For example, the following code will work in FireFox/Mozilla/Netscape without any problems:

<object

</object>

Notice that there’s no need for a container movie.

Now of course, IE browsers are going to CHOKE on this trying endlessly to load the second object. Here’s where the above mentioned trick comes in handy. Without using any Javascript at all, we can hide the second object from IE browsers by using the following:

<object

</object>

And as for the need for an alternate image or text to appear if Flash is not installed, you can now take it a step further and be even more standards compliant than the Satay method by making your alt text readable by screen readers:

<object

</object>

Notice the use of <–> and <!–> to trick non IE browsers into thinking that their respective lines end the comment and continue to render what’s inside the IF statement.

Now you can use the latest recommended Flash detection methods making it un-necessary to have your alt content point to a flash download page.

I have tested this method on IE 6.0, IE 5.5, Firefox 1.0, Mozilla 1.5, Netscape 7.0, Opera 7.1, Safari 1.0.2, IE 5.2 Mac, and yes, even Netscape 4.8. If you see any flaws in this method, I’d love to hear about it via email (I apologize for the lack of commenting capabilities on this blog, I’m still working on it).

This method can be seen in practice at http://www.gilluminate.com/

(12-21-2004 NOTE: Thanks to Stephen Rider for pointing out to me that about 8 months prior to this blog this method already existed as the Hixie Method. I maintain that I wasn’t aware of the Hixie Method at the original writing of this blog and apologize for the repeat.)

(01-17-2005 NOTE: If you plan to use the SetVariable command, you can still use id=”" for the IE version but you should use name=”" for the other version.)

(02-01-2005 NOTE: Comments are now turned on.)

(05-17-2005 NOTE: For information on why this method is more standards compliant than the Satay method, see the W3C Rules for rendering objects. Also, if IE followed these rules completely, they would not choke on the inner object tag, but only render the outter, and there would be no need for the extra IE only code.)

Visit http://www.skyzyx.com/downloads/ and leave your frustrations at the door.

While this page seemed like the answer at the time, once I started trying to uninstall the current version (well documented on macromedia.com) and install the old version (poorly documented on macromedia.com) I was having all kinds of problems. So I googled “flash install cab” and found the app of my dreams!!

Flash Plugin Switcher is a program that lets you switch flash player plugin versions on the fly with the click of a single button! It still requires that you download the .cab files from macromedia (see the link above) but once you have them it’s a breeze. The download page for Flash Plugin Switcher is in German, but the help content is in English.

In IE you can use height on the container, but in Firefox, once the content of that container is too long, it runs outside the borders. In Firefox, you can use min-height, but IE doesn’t recognize it. IE actually handles height the same way firefox handles min-height. So I found a “hack” to make it work in both browsers:

#container{min-height:500px}
* html #container {height:500px}

I’m not really sure why it works, but quite frankly, I don’t care.