PDA

View Full Version : Hover not working in IE



NewWebDesigner
Oct 17th, 2008, 05:12 PM
I am making a 2 level horizontal navigation bar with horizontal submenu. The navigation looks and work the way I want it to in firefox, but the hover to be able to go and click on the second line does not work in ie:confused:. Can you please direct me in how to fix this.

Thanks in adavnce!

<!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>Untitled Document</title>
</head>
<script type="text/javascript" src="menu.js"></script>
<style type="text/css" media="all">

#nav li {
/*float the main list items*/
margin: 0;
float: left;
display: block;
padding-right: 15px;
}
#nav li.off ul, #nav li.on ul {
/*hide the subnavs*/
display: none;
}
#nav li a {
/*for all links in the list*/
color: #FFFFFF;
font-weight: normal;
display: block;
height: auto;
width: auto;
padding: 1px;
border-right-style: solid;
border-right-color: #A4B9DF;
border-right-width: 1px;
padding-right: 16px;
font-family: Verdana;
font-style: normal;
text-decoration: none;
font-size: 0.8em;
}
#nav li.off ul, #nav li.on ul {
/*put the subnavs below and hide them all*/
display: none;
position: absolute;
top: 33px;
height: auto;
left: 0;
padding-top: 15px;
}
#nav li.on a {
}
#nav li.on ul a, #nav li.off ul a {
/* cancel inherit of border
on subnav of active topic */
border: 0;
}
#nav li.on:hover ul, #nav li.over ul { /*for ie*/
background: #white;
}
#nav li.on ul {
/*display active subnav list*/
display: block;
}
#nav li.on ul a, #nav li.off ul a {
float: left;
/*ie doesn't inherit the float*/
border: 0;
color: #FFFFFF;
width: auto;
margin-right: 5px;
border-right-style: solid;
border-right-color: #A4B9DF;
border-right-width: 1px;
}

#nav li.on ul {
/*display the current topic*/
display: block;
}
#nav li.off:hover ul {
/* display the other topics when
their parent is hovered */
display: block;
z-index: 6000;
}
#nav li.off a:hover, #nav li.off:hover a {
color: #2D487B;
}
#nav li.off ul, #nav li.on ul {
/*put the subnav below*/
top: 33px;
*top: 44px; /*reposition for IE*/
}
#nav li.off:hover ul, #nav li.over ul {
display: block;
z-index: 6000;
}
#nav li.off a:hover,
#nav li:hover a,
#nav li.over a {
color: #929871;
}
</style>
<body>
<div id="divNav">
<ul id="nav">

<li class="off"><a href="#">Home</a>
<li class="off"><a href="#">About Us</a>
<ul>
<li><a href="#">Our Promise</a></li>
<li><a href="#">Twn History</a></li>
<li><a href="#">Careers at TWN</a></li>
<li><a href="#">News at TWN</a></li>
<li><a href="#">Contact Us</a></li>
</ul></li>
<li class="off"><a href="#">Products</a>
<ul>
<li><a href="#">Wi-Power Interent Services</a></li>
<li><a href="#">TWN Voice/Data Communications</a></li>
<li><a href="#">Long Distance</a></li>
</ul></li>
<li class="off"><a href="#">Partnership Program</a>
<ul>
<li><a href="#">Become a Partner</a></li>
<li><a href="#">Current Partners</a></li>
</ul></li>
<li class="off"><a href="#">Customer Support</a>
<ul>
<li><a href="#">Contact US</a></li>
<li><a href="#">FAQs</a></li>
<li><a href="#">Downloads</a></li>
<li><a href="#">View Your Bill</a></li>
<li><a href="#">Request a Call</a></li>
<li><a href="#">Moving Service</a></li>
</ul></li>
<li class="off"><a href="#">Contact Us</a>
<ul>
</ul>

<body>
</body>
</html>

This is the javascript code that I was trying to use:
// JavaScript Document
startList = function() {
if (document.all && document.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
}
node.onmouseout=function() {
this.className=this.className.replace
(" over", "");
}
}
}
}
}
window.onload=startList;

itsallkizza
Oct 17th, 2008, 05:28 PM
In order for hover to work in IE, the element needs to have a background-image or color (transparent doesn't cut it sadly). Try adding background-color: #ffffff to #nav li.

NewWebDesigner
Oct 17th, 2008, 05:46 PM
Thanks itsallkizza, I tried doing that it still did not work for me.

I am sorry I know very little about coding and web, my background in print so any knowledge I have for web is dreamweaver help and google based (lol). My company wants a new corporate website and I am the only designer here (and they dont want to pay for a programmer or etc) and they want the navigation to be like at&t wireless main nav. I am completely lost and over my head.

Here is what the css looks like after the change you suggested.

#nav li {
/*float the main list items*/
margin: 0;
float: left;
display: block;
padding-right: 15px;
background-color: #FFFFFF;
}
#nav li.off ul, #nav li.on ul {
/*hide the subnavs*/
display: none;
}
#nav li a {
/*for all links in the list*/
color: #FFFFFF;
font-weight: normal;
display: block;
height: auto;
width: auto;
padding: 1px;
border-right-style: solid;
border-right-color: #A4B9DF;
border-right-width: 1px;
padding-right: 16px;
font-family: Verdana;
font-style: normal;
text-decoration: none;
font-size: 0.8em;
}
#nav li.off ul, #nav li.on ul {
/*put the subnavs below and hide them all*/
display: none;
position: absolute;
top: 33px;
height: auto;
left: 0;
padding-top: 15px;
}
#nav li.on a {
}
#nav li.on ul a, #nav li.off ul a {
/* cancel inherit of border
on subnav of active topic */
border: 0;
}
#nav li.on:hover ul, #nav li.over ul { /*for ie*/
background: #fffff;
}
#nav li.on ul {
/*display active subnav list*/
display: block;
}
#nav li.on ul a, #nav li.off ul a {
float: left;
/*ie doesn't inherit the float*/
border: 0;
color: #FFFFFF;
width: auto;
margin-right: 5px;
border-right-style: solid;
border-right-color: #A4B9DF;
border-right-width: 1px;
}

#nav li.on ul {
/*display the current topic*/
display: block;
}
#nav li.off:hover ul {
/* display the other topics when
their parent is hovered */
display: block;
z-index: 6000;
}
#nav li.off a:hover, #nav li.off:hover a {
color: #2D487B;
}
#nav li.off ul, #nav li.on ul {
/*put the subnav below*/
top: 33px;
*top: 44px; /*reposition for IE*/
}
#nav li.off:hover ul, #nav li.over ul {
display: block;
z-index: 6000;
}
#nav li.off a:hover,
#nav li:hover a,
#nav li.over a {
color: #929871;
}

What I was trying to accomplish with this was to have it z-index over another picture for the navigation to I need the top to be transparent is this not possible? Or is there a way to incorporate the image?

I attached the image which is the top of the website that the navigation was suppose to go over it. Basically the top level would sit on the left bottom blue area and the second level would float under it in the white space.

I am very sorry I am just completely overwhelmed thank you so much for you help!

itsallkizza
Oct 17th, 2008, 06:06 PM
i tested your code and it works fine in ie7, sadly it breaks in ie6 :(

i have to get back to work now (project due for meeting in 30 min) but i'll try and take a closer look later if i can find some extra time

google "css a hover ie6" and sniff around for the rules ie6 follows, hopefully you can find some faster solution than waiting on me

good luck!

NewWebDesigner
Oct 17th, 2008, 07:11 PM
Thank you so much itsallkizza, I will look around on google for that!

BoldUlysses
Oct 17th, 2008, 07:14 PM
IE doesn't recognise the :hover pseudo on elements other than anchor(<a>). So we need to add a little bit of javascript to tweak it for IE.

Thread here (http://codingforums.com/showthread.php?t=149933).

itsallkizza
Oct 17th, 2008, 07:16 PM
heh you know i didn't notice you were using hover on your <li> or i would have brought that up...

you can wrap absolutely anything in an anchor, destyle the anchor and null the href, and you don't need to mess around with a javascript hack

that means you can fix your problem by nesting the submenus under each top menu link, display:none the submenus, position/style the submenus however you like, then add li a:hover .submenu {display:block;} to display the submenus

let me know if you need an example of that

NewWebDesigner
Oct 17th, 2008, 07:24 PM
itsallkizza,

If you could supply an example of that it would be great. I feel like every time I read the code I am trying to understand a foreign language, so examples are extremely helpful to me. THANK YOU SO MUCH FOR YOUR HELP!

itsallkizza
Oct 17th, 2008, 08:06 PM
I have to apologize, I feel stupid today. I totally forgot the IE6 doesn't recognize css pseudo elements, period. That means no :hover.

Here is an example of the basic concept, which, if you take away the javascript is a correct way of running css-only drop-downs.

It's completely unstyled (meaning you'd probably want to add borders, backgrounds and absolutely position the submenus) so that you can understand the basic concept. On that note, the code you have now works fine in both IE7 and FF, so adding a quick JS fix will finish up your specific page.



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Example</title>
<style type="text/css">
body
{
font-family: verdana,arial,sans-serif;
}

body,ul,li,h1,h2,h3,h4
{
margin: 0;
padding: 0;
}

a:focus
{
outline: none;
}

ul
{
list-style: none;
}

ul.top_menu li
{
float: left;
padding: 0 10px;
background: transparent url(http://www.ebonyaura.com/blank.gif);
}

ul.top_menu a
{
color: #000000;
text-decoration: none;
}

ul.top_menu ul.sub_menu,ul.top_menu a:link ul.sub_menu,ul.top_menu a:visited ul.sub_menu
{
display: none;
}

/* --- w3 standards correct --- ---- this works in FF,IE7 ---- */
ul.top_menu a:hover ul.sub_menu,ul.top_menu li:hover ul.sub_menu
{
display: block;
}

</style>
<script type="text/javascript">
<!--
function ie6fix_over(anchorElement)
{
anchorElement.getElementsByTagName("ul")[0].style.display = "block";
}

function ie6fix_out(anchorElement)
{
anchorElement.getElementsByTagName("ul")[0].style.display = "none";
}
// -->
</script>
</head>
<body>

<ul class="top_menu">
<li>
<a href="javascript:void(0)" onmouseover="ie6fix_over(this)" onmouseout="ie6fix_out(this)">
<h4>Top Menu Item One</h4>
<ul class="sub_menu">
<li>Submenu Item One</li>
<li>Submenu Item Two</li>
<li>Submenu Item Three</li>
</ul>
</a>
</li>
<li>
<a href="javascript:void(0)" onmouseover="ie6fix_over(this)" onmouseout="ie6fix_out(this)">
<h4>Top Menu Item Two</h4>
<ul class="sub_menu">
<li>Submenu Item One</li>
<li>Submenu Item Two</li>
<li>Submenu Item Three</li>
</ul>
</a>
</li>
<li>
<a href="javascript:void(0)" onmouseover="ie6fix_over(this)" onmouseout="ie6fix_out(this)">
<h4>Top Menu Item Three</h4>
<ul class="sub_menu">
<li>Submenu Item One</li>
<li>Submenu Item Two</li>
<li>Submenu Item Three</li>
</ul>
</a>
</li>
</ul>

</body>
</html>


If you like, once you're all done styling your current page, post the html code here and I'll write you up an IE6 javascript fix.

abduraooft
Oct 18th, 2008, 06:20 PM
<a href="javascript:void(0)" onmouseover="ie6fix_over(this)" onmouseout="ie6fix_out(this)">
<h4>Top Menu Item One</h4>
<ul class="sub_menu">
<li>Submenu Item One</li>
<li>Submenu Item Two</li>
<li>Submenu Item Three</li>
</ul>
</a>
This is pretty invalid markup, as you can't put a block level element like h#, ul etc inside an anchor!

@NewWebDesigner, I had checked your code, but found a lot of repeated/unwanted styles for the same elements, and felt it'd take some more time to debug it.

So, I'd recommend you to have a look into http://htmldog.com/articles/suckerfish/dropdowns/ and try to learn and create the required menu, by applying the essential styles/scripts only.

PS: Please use
][/COLOR] tags to wrap your code while posting here, to help us to read.

jlhaslip
Oct 18th, 2008, 07:32 PM
Check at http://cssplay.co.uk for some nice css-only dropdowns.
Pretty sure they will have IE compatible ones, too.

itsallkizza
Oct 18th, 2008, 11:41 PM
you have to break standards one way or another. either encompass the hover-styled elements in an <a> or reference them using li:hover. both are incorrect to some degree, one of them is necessary.

NewWebDesigner
Oct 20th, 2008, 02:49 PM
Thanks everyone for your help, I am trying to get this I seem to keep getting stumped over and over again. So I am still working I will let you know if I ever get this, but it doesn't seem so at the moment :(, but I refuse to give up, though my deadline for the navigation was last week. Ready to pull my hair out!!!

BoldUlysses
Oct 20th, 2008, 05:27 PM
It can be done, obviously, and it has been done. So don't give up!

My philosophy (and the philosophy of many folks on these boards) is code it correctly and semantically, which should satisfy the good browsers out there (FF, Safari, etc) and even IE most of the time if you use a strict DOCTYPE, then use conditional commenting to hack it for IE and get out those last few bugs. We have to accommodate IE because it's what most people use, but we don't contort our code, bending over backward for it.

That said, dropdown menus (and forms) are a prime area where invalid markup crops up in an effort to appease IE, when a conditional comment and javascript hack is, most of the time, all you need.

Conditional comments are comments placed in your HTML that IE will read and process but other browsers will ignore. Used in moderation, they're great for adding IE-specific tweaks that you don't want other (correct) browsers to apply.

Check out this page (http://www.sufferndesign.com/helping/site51.html). The hover works in FF, Safari, IE7 and IE6. Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

<title>Hover Test</title>

<style type="text/css">

#outside {
background-image:url('image1.jpg');
height:50px;
width:100px;
padding:5px;
}

#hoverTest {
width:50px;
height:25px;
border:1px solid #fff;
}

#hoverTest:hover {
background-color:#0f0;
}


</style>

<!--[if IE 6]>

<style type="text/css">body {behavior: url(csshover.htc);}</style>

<![endif]-->

</head>

<body>

<div id="outside">

<div id="hoverTest"></div>

</div>

</body>
</html>

It's straightforward, valid HTML with a little javascript hack applied for IE's benefit.

Note the conditional comment. Everything between <!--[if IE 6]> and <![endif]--> will be ignored by every browser except IE6. Within the comment is a stylesheet hack. It instructs IE6 only to apply the javascript contained in the file csshover.htc to the body element, which is what allows the dropdown to work in IE6.

So, assuming your HTML is valid and semantic, you should be able to add that conditional comment, upload the file csshover.htc (http://www.sufferndesign.com/helping/csshover.htc) a directory where the HTML file can find it, and you should be good to go.

Apologies for the length of the reply but we get this question often and I wanted to write something I could refer back to.