Forums

WordPress › Support » Plugins and Hacks

Trying to fix hover with IE - csshover.htc or ie8.js (6 posts)

  1. mwd
    Member
    Posted 1 year ago #

    Hi Guys,

    Ok - so my navigation rollover(aka hover) links weren't appearing correctly in IE7 or IE8 (fine in FF) - when you hover over the links (buttons) they remain on the visited even after you have moved the mouse away.

    After some googling, it seems it may be a (possible)known issue with IE7/8 and hover compatibility.

    FYI - the site is http://www.emotionaltherapy.co.uk

    I found 2 possible solutions:
    1. Peterned's whatever.htc file
    ===============================
    --> I downloaded the file and copied to the same directory as header.php (and style.css)
    --> Pasted the following code into my style.css <BODY> section:-
    body {
    behavior: url("csshover3.htc");
    }
    --> uploaded the style.css to webserver.
    --> Refreshed page in IE and hover still didn't work. Have I missed something here?

    2. Dean Edwards' IE8.js.
    =======================
    --> I have tried to add the html code to my header.php file. I entered the code between the <head></head> tags as instructed. I note that the content appears "grayed out" in dreamweaver.
    But when I remove the "<!--[if lt IE 8]>" and "<![endif]-->" statements, it appears in colour. In either case, the code doesn't seem to resolve my issue!

    The following code entered in the <head> section of header.php:-

    <script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/ie8.js" type="text/javascript"></script>

    --> I then refreshed my IE8 page (F5) but I still my issue still persists.

    =======

    Have I missed a trick here? The installations both seem fairly straightforward...!

    Cheers,

    Sanj

  2. Hax
    Member
    Posted 1 year ago #

    is a javascript issue on your theme. you can accomplish this just trough css remove this pice of code on your theme 

    <script language="javascript">
		sfHover = function() {
			var sfEls = document.getElementById("nav").getElementsByTagName("LI");
			for (var i=0; i<sfEls.length; i++) {
				sfEls[i].onmouseover=function() {
					this.className+=" sfhover";
				}
				sfEls[i].onmouseout=function() {
					this.className=this.className.replace(new RegExp(" sfhover\b"), "");
				}
			}
		}
		if (window.attachEvent) window.attachEvent("onload", sfHover);
</script>

    pure css should work just fine. if you don't know css here is a link that can help you

    http://www.seoconsultants.com/css/menus/tutorial/

  3. mwd
    Member
    Posted 1 year ago #

    Hey - thanks for the reply Hax!

    Really, very much appreciated.

    Was convinced it was the IE known issue...

    I will test this and advise (it may be 2 weeks til I respond, but I will respond).

    That javascript was in the original kubrick theme (I think) although I have taken over the site, it may be something the previous designer put in place.

    Just to confirm - I should remove this from header.php ... right?

    I will of course take a backup before making any changes!

    Thx!

    Sanj

  4. Hax
    Member
    Posted 1 year ago #

    Not sure where the javascript comes from, it may be from your header.php file form your functions.php or a plug in.

    but yes start looking at your header.php file then on the functions.php of your theme. and if its a plug in it my be more difficult. if you have dreamwaver you can do a search on all your folder and just search for a spesific work on the javascript like (window.attachEvent)

  5. mwd
    Member
    Posted 1 year ago #

    Hello Hax,

    You are the man! (or woman) :0)

    Thank you so much. This seems to have fixed the problem for my site.

    The code was indeed in the header.php file.

    Cheers,

    SM

  6. slygrrl22
    Member
    Posted 1 year ago #

    Hi - I am having a similar issue with IE 8. My drop-down menu doesn't work. However, it works fine in Firefox. I tried looking for the above code and couldn't find it on my header.php file or in functions.php either...the website is http://www.benjamintellie.com/blog.

    I have it set up so that it has a "display: none;" when not hovered, but "display: block" on mouseover, just basic CSS. Not sure if there is some javascript issue or other problem. Let me know if there is a fix =)

    Here's an excerpt of the CSS:

    #access ul ul {
    -moz-box-shadow:0 3px 3px rgba(0, 0, 0, 0.2);
    display: none;
    float:left;
    left:0;
    position:absolute;
    top:38px;
    width:180px;
    z-index:1000000 !important;
    }

    #access ul li:hover > ul {
    display: block;

    }

    Thanks much

    Christine

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags