Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New Coder
    Join Date
    Feb 2007
    Posts
    38
    Thanks
    1
    Thanked 0 Times in 0 Posts

    li:hover and htc

    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:

    hover.htc

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

    The HTML

    Code:
    <!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:

    Code:
    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

  • #2
    Senior Coder ahallicks's Avatar
    Join Date
    May 2006
    Location
    Lancaster, UK
    Posts
    1,134
    Thanks
    1
    Thanked 57 Times in 55 Posts
    Try an absolute path to the htc file. IE might be mistaking where you have placed it
    "write it for FireFox then hack it for IE."
    Quote Originally Posted by Mhtml View Post
    Domains are like women - all the good ones are taken unless you want one from some foreign country.
    Reputation is your friend

    Development & SEO Tools

  • #3
    New Coder
    Join Date
    Feb 2007
    Posts
    38
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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");
    }

  • #4
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,785
    Thanks
    8
    Thanked 131 Times in 129 Posts
    Code:
    body
    {
    	behavior:url(css/hover.htc);
    }
    your in the wrong folder. try that out.
    Stop making things so hard on yourself.
    i is tugbucket :: help raise tugburg :: Whitehaven Kiwanis

  • #5
    New Coder
    Join Date
    Feb 2007
    Posts
    38
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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);
    }

  • #6
    New Coder
    Join Date
    Feb 2007
    Posts
    38
    Thanks
    1
    Thanked 0 Times in 0 Posts
    I found the damn problem....

    Code:
    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

    Code:
    <!--[if IE]>
    <style>
        body 
        { 
            behavior:url('css/csshover.htc');
        }
    </style>
    <![endif]-->
    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

  • #7
    Senior Coder koyama's Avatar
    Join Date
    Dec 2006
    Location
    Copenhagen, Denmark
    Posts
    1,246
    Thanks
    1
    Thanked 5 Times in 5 Posts
    Quote Originally Posted by arekanderu View Post
    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?
    Quote Originally Posted by arekanderu View Post
    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:
    Code:
    /* 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 by Arbitrator on how to enable/disable content sniffing in IE so you can see for yourself the consequence of not serving correctly.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •