Drop-down menu works in IE but not Firefox, Safari, etc.

[nfarrier]

I'm a school teacher trying to get a web page update working doing a drop-down menu.

The code works at http://hms.sps.lane.edu but the update that uses more css, including "navigation body" "wrapper" and "header" at http://hms.sps.lane.edu/new/, the drop-down menu only works in IE. I don't understand enough of css to debug this.

Hoping someone can help.

#navigation-wrapper {
    float: left;
    margin-left: 42px;
    width: 205px;
    font-size: .8em;
}
#navigation-header {
    height: 12px;
    background-image: url(../images/nav-header.gif);
    background-repeat: no-repeat;
    background-position: top;
}
#navigation-body {
    background-image: url(../images/nav-bg.gif);
    background-repeat: no-repeat;
    background-position: bottom;
}
#navigation-wrapper ul {
    margin: 0;
    padding: .5em 0 1em 2.25em;
}
#navigation-wrapper ul li {
    margin: 0;
    padding: 0 0 .5em 0;
    list-style-type: none;
}
#navigation-wrapper a {
    color: #1e7e1c;
    font-weight: bold;
    text-decoration: none;
}
#navigation-wrapper a:hover {
    color: #0000FF;
}
#navigation-wrapper a:visited {
    color: #1e7e1c;
    font-weight: bold;
    text-decoration: none;
}
.dropmenu {
    position: absolute;
    top: 0;
    left: -500px;
    background-color: white;
    border: 1px solid #999;
    border-bottom-width: 0;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 10pt;
    width: 155px;
    font-weight: normal;
    line-height: 14px;
    z-index: 100;
}
.dropmenu ul {
   margin: 0;
   padding: 0;
   list-style-type: none;
}
.dropmenu li {
   display: inline;
}
.dropmenu a, .dropmenu a:visited, .dropmenu a:active {
    width: 100%;
    display: block;
    text-indent: 3px;
    border-bottom: 1px solid #999;
    padding: 1px 0;
    text-decoration: none;
    font-weight: normal;
    color: #1e7e1c;
}
.dropmenu a:hover {
    background-color: #CCC;
    color: #124C11;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 10pt;
    font-weight: normal;
    line-height: 14px;
}
 

[drhowarddrfine]

The problem will lie with that you used IE to initially test this instead of one of the other more modern browsers hence the reason it doesn't work with them. You also have 119 XHTML errors but changing the doctype to HTML reduces that to 28 or so.

In your CSS, you have two errors from using "mso" properties which do not exist. And as long as I'm harping on you, tables should never be used for layout.

All that said, I would validate for that list of html errors, the most significant being misplaced tags for body and other elements. You get a hundred more errors using the xhtml doctype because that is case sensitive and other relatively minor problems that come from using that.

[nfarrier]

@drhowarddrfine
Thanks for the info and the quick response. I did some cleaning and removing of tables on the http://hms.sps.lane.edu/new/ site BUT the drop down menus are still only working in IE.

(I don't yet know how to format the 3 columns on the first page w/o using tables, but removed the tables in the navigation bar.)

[drhowarddrfine]

After looking at this again, I think this might actually be a javascript issue. I'll have one of them look at it.

[Dormilich]

the Error Console reports an unknown variable (jQuery is not defined, HMSjavascript.js (line 245)) and tons of CSS errors with respect to some top/left statements.

the top/left statements require a unit to be passed*, not only a number.

function moveObjectTo(objectID,x,y) {
    var el = getElement(objectID);
    el.style.left = x + "px";
    el.style.top = y + "px";
} 

Hooray for Firebug!



* - there’s a crucial difference between "1px" and "1em" or "1%" …

[nfarrier]

@Dormilich
Woo hoo! That fixed it!!!! Thank you. I'm just a middle school teacher with only a little knowledge. I would NOT have found that. Thanks so much!

By the way, how do I fix those "tons of CSS errors with respect to some top/left statements" you mentioned? I don't know what that means?