li:hover and htc

arekanderu

08-07-2007, 01:44 PM

Hello,

After some long long research on Google and on CodingForums i still can not figure out how do i use the htc file with the fix on this issue. A previous thread can be found here:

http://www.codingforums.com/showthread.php?t=114518

The test with my menu can be found here:
http://www.e-djs.gr/tests/hover/

The HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Hover Test</title>
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta name="Generator" content="" />
<meta name="robots" content="index, follow" />
<link href="css/main.css" rel="stylesheet" type="text/css" />
</head>

<body>

<div class="wrapper">
<div id="info_block">
</div>
<div id="main_menu">
<ul id="mainlevel">
<li><a href="" class="mainlevel" ></a>Button 1</li>
<li><a href="" class="mainlevel" ></a>Button 2</li>
<li><a href="" class="mainlevel" ></a>Button 3</li>
<li><a href="" class="mainlevel" ></a>Button 4</li>
</ul>
</div>
</div>

</body>
</html>

The CSS:

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

body
{
background: #525859;
font-family: Arial, Helvetica, san-serif;
font-size: 13px;
}

div.wrapper
{
margin: 0 auto;
width: 800px;
position: relative;
background: #FFFFFF;
}

#main_menu
{
width: 400px;
margin: 0;
float: left;
height: 33px;
background: #737173;
}

#main_menu ul
{
list-style-type: none;
margin: 0;
padding: 0;
}

#main_menu ul li
{
border-left: 2px solid #000000;
display: block;
float: left;
padding: 8px 20px;
}

#main_menu ul li a, ul li a:visited
{
color: #FFFFFF;
font-size: 12px;
font-weight: bold;
text-decoration: none;
}

#main_menu ul li:hover
{
background: #000000;
}

The HTC File was taken from here:
http://4umi.com/web/css/hover.htm

The quesstion
What do i need to change on the CSS in order to make the htc file work properly on FF and IE 6 ?

Some further notes.

1)The test on the http://4umi.com/web/css/hover.htm web site, works only with my FF (I have Windows 2003, IE ver 6.0.3790 ) but on my laptop with XP SP2 works fine under IE as well.

2)The test i posted does not work on my laptop with XP either even though i tried various stuff on the CSS file.

Looking forward to any replies and thank you for your time

ahallicks

08-07-2007, 01:55 PM

Try an absolute path to the htc file. IE might be mistaking where you have placed it

arekanderu

08-07-2007, 02:21 PM

Unfortunately none of them below worked

body
{
behavior:url('http://www.e-djs.gr/tests/hover/css/hover.htc');
}

body
{
behavior:url('hover.htc');
}

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

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

harbingerOTV

08-07-2007, 07:29 PM

body
{
behavior:url(css/hover.htc);
}

your in the wrong folder. try that out.

arekanderu

08-07-2007, 11:25 PM

Thank you for your answer harbinger but i do not really see why my behavior:url() is wrong. The css file and the hover.htc are in the same folder so the following should be correct:

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

arekanderu

08-08-2007, 12:29 AM

I found the damn problem....

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

This, should not be at the external CSS. For some reason IE does not load it...it must be added at the head of the page which links the external CSS so you simply add to the head



and everything works like they should!

PS: i added the "css" folder at the url folder since the htc file is no longer at the same location

koyama

08-08-2007, 09:24 PM

Unfortunately none of them below worked
I am not sure why it didn't work using an absolute path? Is there a chance that you have made some simple error?
This, should not be at the external CSS. For some reason IE does not load it...it must be added at the head of the page which links the external CSS
The problem with the proprietary behavior property is that when a relative path is specified for the url then it is taken with respect to the “executed” HTML page and not with respect to the CSS file in which one would usually use the declaration. This is counter-intuitive and not practical, I think. So if the CSS and HTML pages reside in different folders then the HTC file may not load as expected.

Indeed, in CSS, when one specifies a relative url for a background-image in the style sheet, then it is taken with respect to the style sheet and not the HTML. This is intuitive and practical.

For those familiar with PHP, the problem may seem familiar: includes are taken with respect to the executed script. This gives problems with nested includes.

Example: Suppose you have this setup

http://somedomain.com/index.html
http://somedomain.com/hover.htc
http://somedomain.com/css/styles.css

Then your style sheet should look like this:
/* styles.css */
body {
behavior: url(hover.htc);
}

As a side note, be sure to serve the HTC file as text/x-component. When one points directly to the HTC file using Firefox and selects View > Page Info > General then one finds that it is served as text/plain. Look into .htaccess to correct the problem.

Why? If content sniffing is disabled in IE then the HTC file will fail to load properly resulting in your hover effects not showing up. If you are not familiar with content sniffing in IE, the check this post (http://codingforums.com/showpost.php?p=580474&postcount=7) by Arbitrator on how to enable/disable content sniffing in IE so you can see for yourself the consequence of not serving correctly.