You are here

HTC components in XP Service Pack 2

Well, that took only half a day of fiddling...

Since the Windows XP Service Pack 2 includes a significant update to the Tablet PC part, one of the first things I installed when my tablet finally arrived was installing the SP2 public preview (RC2 at the time). I noticed a few bugs, and was happy to see most of them gone in the RTM version I am running now.

One of the odd things I noticed was that SP2 broke the transparency of my PNG files. I am using a HTC component to properly display PNG transparancies on a couple of websites. The neat thing about this approach is that it requires only a single reference to a CSS file, and there is no additional scripting that could confuse other borwsers. However, after installing SP2, transparency was gone.

Looking around on the web I soon found out that simpler javascript hacks still worked ok, so Microsoft hadn't decided to kill the AlphaImageLoader filter that does the magic. So far so good. On the other hand, none of the sites that offered a PNG fix HTC seemed to work anymore. Looking further at http://webfx.eae.net/, I noticed that none of their HTC components worked anymore, see for example their very usefull *cough* blink component. Bummer. Did Microsoft kill the entire concept of HTC behaviors?

Looking further, I came across the most ambitious HTC project I know of: Dean Edwards' attempt to fix all current CSS problems in IE. While his PNG workaround demos seem to have some quirks, most of his fixes, implemented in HTC's worked just fine. So it wasn't just the CSS behavior mechanism that got hosed in SP2.

When I tried to get Dean's package to work from my webserver, non of his fixes seemed to work. Not from my servers, but on his, they work fine. The exact same files, the exact same browser. Argh!

Back to some of the other Service Pack 2 bugs, or features if you are so inclined. I guess someone decided that in orded to increase security, IE now has to be really strict about mime-types. I notcied on some of the weblogs I visit, just clicking on a link to an asf would often no longer open media player as we have all come to get used to. If the mime-type is not properly configured, you're getting the file as text/plain. Or as it turns out text/jibberish. IE is nice enough to warn me that the file might not display properly.

See the link with the HTC problem? The exact same files, the exact same browser, different mime-type. HTC files are now required to be of mime-type text/x-component, or they just won't work! Dean Edwards already tells us that we really should use the proper mime-types (near the bottom of the page), but many other people haven't done so.

Topics: 

Comments

Thank you for linking to my site. I have updated it with the mime-type information.
Maybe the others would update too, if you send them a short letter about this. I have fortunately found your article in my referrer log.

Sorry, you are right. I notified a couple of authors, but 'forgot' some of the others I found later... Anyway, congrats on fixing it on your server, I can't get my own mime-types configured correctly at this moment. Oh, the irony...

Thanks for pointing this out, WebFX has now been updated to use the correct mine type for htc files.

/Emil A Eklund

Could you explain a bot how do you change mime-type (when I say how, I mean what & where must we do something) in order to get htc component work ???

Thank you in advance.

Toine

With BEA WebLogic 9.1 i extended the web.xml with the following code:

htc

text/x-component

Now our application works with .htc files and at least IE 6.0.2900 on XP SP2. You can check the change by directly calling the htc's url in a browser. If the browser offer you a File Download dialog, you are successful. If a blank page is shown, it will not work. The blank page in fact contains the htc content as mime type text/plain.

We have successfully implemented the button hover effect mentioned in a posting above.

Sorry -the posting preview showed more the my former posting. Here is the missing rest:

    <mime-mapping>
        <extension>
            htc
        </extension>
        <mime-type>
            text/x-component
        </mime-type>
    </mime-mapping>

About a month ago I used an HTC component in a fold-out vertical menu. Got the idea from Eric Meyer's book. It worked well in all the browsers I tested, including IE. Then, one day last week, I started getting reports from AOL users that my menu was no longer folding out. I couldn't figure out what they were complaining about, as IE still tested o.k for me. So I signed up for a free trial of AOL and installed their stuff on a box I was willing to sacrifice. And sure enough, using the AOL browser (based on IE), the menus didn't work. And even worse, where pre-AOL the IE browser on that box displayed the menu just fine, post-AOL installation that very same native IE browser would not display the menu correctly. So not only do the menus not work in AOL, AOL dismembered the originally installed IE browser. So I'm not sure what AOL is doing here, but I do think it is related to the htc component, and I sure wish I could get it working again. Unfortunately too many of my users are on AOL, so the problem can't be ignored. For now I've got around the problem by using more javascript, but the htc solution sure was sweet.

I have added a new post outlining a workaround for if you are having problems adjusting the mimetype.

I stumbled upon this post through google. For those people who may be wanting to set the mime type, you can do so by adding the following line to a .htaccess file [if you use Apache]

 AddType text/x-component .htc

Mike, thanks for the suggestion. I tried creating a .htaccess in the same directory as field.php and adding the AddType code but it causes a "500 Internal Server Error". I've googled some but have not been able to find a fix that has worked. Do you have any suggestions?

You might not be allowed to either use a .htaccess file at all, or to use mod_mime.
Perhaps this workaround can be helpful?

Greetings,

I tinkered with some htc driven behaviors and already have text/x-application served from the server. How might I achieve multiple definitions for .htc? Or what should I do now?

Regards

mattisan

A file can have only one mime-type. Do you require the mime-type for htc to be 'text/x-application' elsewhere?

If your host is using apache, and you have access to mod_mime, Mike's method above should work.

Shouldn't text/x-application be paired with .hta files?

Multiple filetypes can share a mime-type, but a single file type can have only one mimetype 

Hi!

I just tried to open hoeben.net and it turns out that the Menu (the black one on the top of the page) did not work in the IE. I am using Version 6.0.2900.2180 on Win XP SP2. Now I try to figure out which (security) settings are mandatory so .htc works fine....

 

Greetings,

sonixx 

If you set the Security Level in the Security tab of Internet Options to high, most any script will fail to work. Resetting the security level to medium should (re)enabled the menus.

 I started using Pure CSS Popups with the .htc component over a year ago, and everything worked great. That is, until when we installed Service Pack 2. Now the .htc file loads extremely slowly in IE. (I'm using IE 6.0) I've gone through yours and other articles on this subject, and I've made the appropriate revisions (i.e. mime type), but it's still loading very slowly. If someone could please review the links below, and they could give me some advice on how I can correct this problem, it would be greatly appreciated. Thanks.

Site URL: http://www.douglas-county.com/
CSS Stylesheet:  http://www.douglas-county.com/scriptlibrary/stylesheet.css
HTC File: http://www.douglas-county.com/scriptlibrary/iefixes.htc

KWilliams

Looking at your site, it seems to be an image loading bug:
http://www.bazon.net/mishoo/articles.epl?art_id=958

Basically, each element that has a background image and/or list style image causes a new request for the graphic file you specified. Cut back on the background images and bullet images, and/or experiment with the partial workaround outlined in the article.

IE expects HTCs to contain content that needs to be rendered. You can avoid this by adding the following to the top your file.

<PUBLIC:COMPONENT
lightWeight = "true">

... your other PUBLIC: statements ...

</PUBLIC:COMPONENT>

I'm usint JanoHu's IE Hover emulation (mentioned above) for a HTML based CD and have run into the SP2 security issue, the problem is being that my project is CD based, I can't declare mime/types. If the project is run off of the local file system, there is no problem if it is run off a CD, MSIE 6 SP2 stops the .HTC file cold. This is extremely fustrating when trying to create an HTML standards compliant project that uses DHTML menus instead of complicated JavaScript menus.

It took a great deal of effort but I found the answer to my problem. By default WinXP SP2 does not allow active scripting to run from CD based webpages (see http://www.microsoft.com/windows/ieak/techinfo/deploy/60/en/appendix.mspx look for "Mark the Web").

The work around to this issue is to add <!-- saved from url=(0013)about:internet --> to each HTML file on a cd between the DOCTYPE and HTML tags. This will force the HTML files into the Internet zone. The catch is that all links must lead to files that also have this entry or the links will not work. This means that if one is using this trick they can not link to PDF files that also happen to be on the CD.

This is just another reason why MSIE sucks. MSIE is blocking scripting that would not be needed if MSIE simply supported CSS2 correctly. Its very very fustrating.

... for updating the rest of us on the workaround. You had me...

I've been trying to make the hover work on my app, i'm using Weblogic 8.1 on a Win XP/Sp2 machine, but to no avail.

Does anyone have any idea how i can make it work?
My css and htc is on the same folder but it seems that the htc file is not being loaded by the css.
It works fine on firefox 1.0.7 but not on IE v6.0 xpsp2.

Hi, can you explain please how can I change the mime-type for IE on XP SP2? I ll appreciate that. Thanx.

The mime-type setting needs to be done on the server, not in your IE browser. The steps to make the change depend on the type of server.

If you're using Apache, you can set the mimetype by adding the following line to your .htaccess file

AddType text/x-component .htc

For IIS 5 the propert mimetype should already be set up. But if you need more info there's an article up on Microsoft's technet.

If you're on a shared server, you may not be able to access these settings. In that case, you may be able to use a workaround I outlined.

I added AddType text/x-component .htc line to .htaccess file still no luck. Now by shared server you mean any other server other than dedicated one, right?

The htc on the site you name links to seems to work alright; proper mimetype, and proper dropdown menu functionality. Fixed it?

Hi,

I am using the csshover.htc file to make css/ul based menus work in IE (they already work in Firefox). I got the .htc file to work in IE. But now my client upgraded to IE7 and the drop-down menu function now longer works. I have the latest version of csshover.htc (V1.42.060206).

Do I need to do something special to make it work with IE7?

IE7 no longer needs the csshover.htc workaround, it should work without it. The HTC might actually be interfering with the css menus. The solution is to put the reference to the htc (and any other IE fixes that are obsolete in IE7) in another css file and use conditional comments:

<!--[if lt IE 7]>
  <link type="text/css" rel="stylesheet" href="ie-fixes.css" />
<![endif]-->

Brief Summary:

My conditional comments, specific only to all IE browsers, are affecting the display in Fire Fox. Anyone know why this is?

Detailed Explanation:

I am trying to generate a horizontal css menu that will work in both FF and IE. I am using the tutorial found at http://www.seoconsultants.com/css/menus/horizontal/ and http://www.tanfa.co.uk/css/examples/menu/tutorial-v.asp and I am working at it on a website hosted by Dream Host that is located at http://www.frewing.ca/sandbox/

I went through these tutorials up until the point where I added some conditional comments that were IE specific. I simply copied and pasted. The comments changed the display format in FF. How??? I think I'm missing something here.

I can't find any conditional comments in your sandbox site, so I guess you removed them. You must have made a mistake copy/pasting the code with conditional comments in it, because the whole idea is Firefox happily ignores the code, but that code alone.

I tried the following and it does not solve the issue with IE7 and the csshover.htc program. Are there any solutions to get a drop down css menu to work in IE 7 now??

body
{
behavior: url(csshover.htc);
}

The necessity of csshover.htc is gone in IE7; the functionality that needed to be emulated before IE7 is now part of IE7. Does your CSS dropdown menu work in Firefox?
You may need to put the htc reference into a separate css file, and let IE7 ignore it. Like so:

<!--[if lt IE 7]>
  <style type="text/css" media="all">@import "fix-ie.css";</style>
<![endif]-->

Hi

I'm trying this on http://www.boitedenuit.net/intranet/testm.php

It works fine in IE7, FF, Opera, Netscape and Safari. (I haven't tested that in other browsers)

However, it's still now working in IE < 7. I have added the .htaccess file and csshover.htc (V2.02.060206), I'm using XP home SP2. What I'm doing wrong. Also, I have noticed that non IE browsers are adding some extra padding at the top, but that may be a beyond the scope of this discussion.

Thanks.

Hi,

Where can I find what/where this ie-fixes.css is?

the link goes to an invalid MSDN page, which really doesn't help.

Thanks

I kept having issues with this. I was pulling my hair out. If you too are having problems, try putting a "./" in the front. It is relative to the .htm page, not the css page (at least with XP sp2 & IE 6 - with latest hotfixes as of 2006/09/01).

So, my directory stucture is:

myWebSite\
|-> css\myCSS.css (with behavior:url and :hover)
|-> index.htm (has div that uses the rollover)
...

try this example:
body { behavior:url(./css/csshover.htc); }
...even though the csshover.htc is in the same directory as my .css; this works.

instead of:
body { behavior:url(csshover.htc); }

THANK YOU THANK YOU THANK YOU!

I don't have much hair to pull out, but I sure was trying. Your suggestion made everything happy again.

My directory structure is:

homepage
css files
csshover.htc
subdirectory containing webpages
subdirectory containing webpages
etc.

If I read what you're saying correctly, I'm going to have to either change the site structure or have multiple behavior: url(csshover.htc); paths for the htc to work in the subdirectories?

Currently, the dropdown menu on the homepage works, but none of the pages in the subdirectories does - in IE6 - IE7 and FireFox work fine.

OMG MERCY!! Thank you for sharing that, it was a great help - now my page is working as intended!!

I got a JSP with an iframe in it which displays a lengthy report. I have a .htc which is used to hide the scrollbars which appears due to the iframe and adjust the IE scrollbars accordingly such that the IE scrollbars alone is used to scroll the page. This is done by adjusting the length and width of the page containing the iframe and forcing the adjustment to the IE scrollbar.
Im usin IE 6 and Weblogic 8.1. The iframe behavior is defined in a CSS and is mapped to the .htc file, but it refuses to call the .htc.
Please someone tell me the how to set the mime-type in weblogic and also any ideas u have to make this work.

Also is ther any other way u can think of to solve this scrollbar issue apart from usin .htc??
I have spent lots of hours on this single issue. Ypur help is greatly appriciated.

Thanks...

As far as I know, there's nothing you can do in an htc file that you can not do with a normal js file. The only reason to use the htc file is to have the elegance of using CSS to add a behavior to an element or group of elements.

But it sound like what you're doing should be possible with 'normal' javascript just as well...

I would like to use htc over java in order to access the 10% of web users with javascript disabled. Unfortunately, I can't quite seem to get it to work just yet.

Since HTC files are made of javascript, they won't work if javascript is disabled either.

total_depression:

Did you ever find a solution to this? I am having a very similar problem right now with a JSP and weblogic refusing to recognize the .htc file for a CSS nav. I've placed the .htc in the same directory as the JSP, so the call to the behavior file couldn't be simpler. Also have verified that the .htc is there by hitting it directly in the browser. Works fine with static pages on Apache. Tearing hair out here, will be bloodied and bald soon.

I have no experience whatsoever with JSP or weblogic, so I cant help you there, sorry...

Using the code from Microsoft.com to build a vertical menu that exposes/hides.
It works fine until I try to NEST. The funny result is that when I click on the nested menu item, the item outside (above) the nested one is also affected, ie, closed.
I am including the code that I copied from Microsoft. I am using ie6.0

Admin note: removed HTML. Please provide a link instead.

Hello,

Just wanted to say this is a great site and thank you so much for the help and information you provide to people. I am having a problem with the horizontal drop down menu and IE6. I used the tutorial from www.tanfa.co.uk and was led to the Peterned site. Everything seemed to work beautifully, but even with the mime-type set correctly (to text/x-component for .htc files) on the hosting site for the web site I am creating, IE6 still can not seem to get the drop downs. I will be glad to provide you with the files. The page I have created is just a test so the links do not work yet, but the drop downs should work (is that right? I am a newbie, teaching myself, so perhaps I am missing something very important!). The url is: www.windsonthelake.com/indexalt.html (the css file is an external stylesheet, so if you need that and the .htc file, I will be glad to email those to you; perhaps the .htc file is not coded properly). Thank you so much for your help. I am lost and frustrated!

Sincerely,
Whitney

I didn't realize I could just give you the addresses of the files. Here they are:

http://www.windsonthelake.com/wotlaltstyle.css
http://www.windsonthelake.com/csshover.htc

Thanks again.

Whitney

Pages