CSS dropdown & IE bug

Thread view:

Enable EMail Alerts

Start New Thread

Thread rating:

Marco - 06 Apr 2005 22:50 GMT

hi
I'm trying to implement a CSS dropdown menu like this
http://www.alistapart.com/articles/hybrid/

on this website
http://www.oratoriogroppello.com/nuovo.php

The problem is the Javascript made to resolve the lack support of

:hover. It doesn't work. why?

thanks to everybody

Marco

Reply to this Message

Arctic Fidelity - 06 Apr 2005 22:58 GMT

Marco <sperminator.NOSPAM@tiscali.it> wrote in news:yQY4e.745424
$b5.33530305@news3.tin.it:

> The problem is the Javascript made to resolve the lack support of
>:hover. It doesn't work. why?

There are any number of things that could be wrong. I've just finished
something like this, and I had two problems. A) I had to set the
correct mime-type for the file on my server for XP SP 2, and then I
accidently had specified the wrong url() for it. Other than that, I
don't know why it would not be working for you unless you post up some
code that we can look at.

Signature

Arctic Fidelity <spam@sacrificumdeo.net>
<http://www.sacrificumdeo.net>
"Beware of bugs in the above code; I have only proved it correct, not
tried it." -- Donald Knuth

Reply to this Message

Arctic Fidelity - 06 Apr 2005 23:01 GMT

> Marco <sperminator.NOSPAM@tiscali.it> wrote in news:yQY4e.745424
> $b5.33530305@news3.tin.it:
[quoted text clipped - 8 lines]
> don't know why it would not be working for you unless you post up some
> code that we can look at.

Sorry, I should have mentioned that I was using an htc file and the
csshover file found at <http://www.xs4all.nl/~peterned/csshover.html>
and I would recommend you do the same, I have found it to be the best
way to do this kind of stuff.

Signature

Arctic Fidelity <spam@sacrificumdeo.net>
<http://www.sacrificumdeo.net>
"Beware of bugs in the above code; I have only proved it correct, not
tried it." -- Donald Knuth

Reply to this Message

Marco - 07 Apr 2005 09:06 GMT

>>The problem is the Javascript made to resolve the lack support of
>>:hover. It doesn't work. why?
>
> Other than that, I
> don't know why it would not be working for you unless you post up some
> code that we can look at.

here some code
thank you very much.

bye

______laymenu2.css
#nav {
    position: relative;
    width: 750px;
    height: 1.05em;
    margin: 0;
    padding: 0;
    border-bottom: 3px solid #f63;
    white-space: nowrap;
}

#nav li { /*float the main list items*/
    margin: 0 0 0 2px;
    float: left;
    display: block;
    border-width: 1px 1px 0 1px;
    border-style: solid;
    border-color: #aaa #555 #f63 #999;
    list-style-type: none;
}

#nav li ul { /*put the subnav below*/
    position: absolute;
    left: 0;
    width: 100%;
    top: 1.25em;
    height: 0.75em;
    margin: 0;
    padding: 0;
    white-space: nowrap;
    display:none;
}

#nav li a { /*about the main list items*/
    width: 7em;
    display: block;
    margin: 0;
    padding: 1px 0.4em;
    border-width: 1px 1px 0 1px;
    border-style: solid;
    border-color: #ccc;
    background-color: #eee;
    color: #666;
    font: normal 0.7em/120% Verdana, Arial, Helvetica, sans-serif;
    text-align: center;
    text-decoration: none;
}

#nav li.on a { /*active main menu item*/
    font-weight: bold;
    background-color: #f63;
    color: #fff;
    border-color: #f96 #c30 #f63 #f96;
}

#nav li ul a { /*about submenu*/
    border: 0;
    float: left; /*ie doesn't inherit the float*/
    color: #f90;
    width: auto;
    margin-right: 15px;
}

#nav li ul li { /*remove submenu borders*/
    border: 0;
}

#nav li:hover ul, #nav li.over ul { /*for ie*/
    display: block;
    z-index: 6000;
    background: #fff;
}

#nav li.off a:hover, #nav li.on a:hover { /*mouse over main list items*/
    color: #f90;
}

/*subnav formatting*/
#nav li ul a, #nav li.on ul a {
    display: block;
    padding: 0.06em 1em 0;
    border: 0;
    background-color: #fff;
    color: #000;
    font: normal normal 0.66em/110% Verdana, Arial, sans-serif;
}

__ ieHover.js (inserted to correct IE bug as reported
__ http://www.alistapart.com/articles/hybrid/

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;

Reply to this Message

Alan J. Flavell - 06 Apr 2005 23:14 GMT

> The problem is the Javascript

Then you don't seem to have a stylesheets problem.

> made to resolve the lack support of :hover.

But you're not asking for help with CSS.

Reply to this Message

Martin! - 07 Apr 2005 10:05 GMT

>>The problem is the Javascript
>
[quoted text clipped - 3 lines]
>
> But you're not asking for help with CSS.

you obviously have no clue the OP is talking about

Reply to this Message

Alan J. Flavell - 07 Apr 2005 10:28 GMT

> you obviously have no clue the OP is talking about

I'm sure they'll have found your contribution completely helpful and
constructive.

bye.

Reply to this Message

Martin! - 07 Apr 2005 10:06 GMT

>>The problem is the Javascript
>
[quoted text clipped - 3 lines]
>
> But you're not asking for help with CSS.

you obviously have no clue what OP is talking about

Reply to this Message

Marco - 28 Apr 2005 19:55 GMT

> hi
> I'm trying to implement a CSS dropdown menu like this
[quoted text clipped - 5 lines]
> The problem is the Javascript made to resolve the lack support of
> :hover. It doesn't work. why?

I reply by myself
there was a conflict with another js in the page (a kind of newsticker)

Reply to this Message

Webmaster Forum / HTML, CSS, Scripts / CSS / April 2005

CSS dropdown & IE bug