Tag Archives: .htc

Cross browser CSS3 hover on non-anchor tags


All browsers but Internet Explorer handle hover on tags other than the anchor tag; the anchor tag is most often used for links. By using CSS hover one can make for example a drop down menu, by causing elements to appear when the mouse is placed over them; Without, using javascript.

The solution to Internet Explorer lack of hover support comes from a method to extend the functionality of the browser with behavior files.

Peterned created csshover3.htc specifically to allow CSS3 hover to be used today with all browsers. It is used by adding the following to a html page inside a style tag.

body { behavior: url("csshover3.htc"); }

csshover3.htc must be loaded onto the host. … Peterned has directions. An example CSS only menu is also shown. … the behavior program then looks at the CSS of the page and enables hover to work on any style class that is using it.

Advertisements

CSS rounded corners in all browsers


IE does not support CSS3 rounded corners at this moment. However IE does have a method of extending their support for different styles which can be included in the style sheet. These IE style extensions are called behaviors.

On Google code site exists border-radius.htc when this file is uploaded to a site. It can be called using:

<style>
.rounded-corners {
behavior: url(border-radius.htc);
}
</style>

The complete solution would then become …

<style>
.rounded-corners {
-moz-border-radius: 10px; /* Firefox */
-webkit-border-radius: 10px; /* Safari, Chrome */
border-radius: 10px; /* CSS3 */
}
</style>
<!–[if IE]><link rel=”stylesheet” href=”ie.css” type=”text/css” /><![endif]–>

Note: if the behavior: url address is not absolute it is relative from the browser html page not the css page.