Dropdown quit working

Mouse over class info, suppose to be a dropdown. If you click on forums and then do it, it works. The forums and index page use separate stylesheets and html. I didn’t think I changed anything, specifically nothing to do with that navigation… but I must be wrong. Notice anything that would indicate the problem? The stylesheet specific for this is www.outlawracing.com/stylesheets/main.css
The stylesheet specific for the forums is www.outlawracing.com/stylesheets/forums.css

Actually, I have no idea what happened but a few things seem to be screwed up slightly. Hrmmmmm

All of your .css files are coming back as 404 errors. Maybe an incorrect path issue?

http://www.outlawracing.com/forums/styles/prosilver/themelinks.css

Where do you see that at? Would be odd because the site is layed out correctly, except for a few things. I’ll check my paths but it just doesn’t seem right since everything is in it’s place correctly

edit: the link you posted “shouldn’t” have anything to do with these problems.

I see 7 .css files returning as 404 errors for this page (6 + the one I posted above).

I don’t know that any of them are attributing to the problem, but it would be very important to either remove them if not needed or correctly path them or upload them.

How about now?

that’s better. Could you post the javascript used for the dropdown?

I THINK this it the javascript:

<!--[if lt IE 7.]>

<script language="JavaScript" type="text/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>

I don’t really do good with javascript, so I just copy and paste stuff if it deals with javascript. This is in a lower than ie7 conditional though. I don’t think it uses javascript for other browsers. Again, this was working earlier today and I haven’t touched javascript any, I’m not sure what I did… :frowning:
It’s suppose to be your basic suckerfish dropdown.

edit: notice the www.outlawracing.com/index.php?page=registration page, the fields are not getting the styles applied to them.
edit2: nevermind, you have to be signed in to view that page ^ but they have a class=textfield and in my main.css I have styling applied to .textfield. I don’t get it.

you got me. That’s why I asked you to post the js, b/c I wasn’t seeing it anywhere. I did see this conditional but kinda ignored it…

maybe just remove the conditional statements and see what happens?

Didn’t do a thing. I’m really confused. Even if my host was changing some version of languages… that shouldn’t affect my textfields on the other page… I can open the page up for viewing if you would like to see it?

do you have a backup version of the page from earlier today when it was working?

Not that I know of. Usually when I’m working on stuff, it’s small and if anything happens I usually do it in small sections and can just easily undo it. This seems to have slipped by, and it’s odd that it’s that and those textfields (all I’ve noticed so far). The textfields were working 2 hours ago. I haven’t really done anything since. I the position of an element, through main.css. Uploaded the file, saw what it did. I undid the change and uploaded main.css again, and it put it back in place. That’s when I noticed it, but there’s no way that caused all this. ;/

Hi, I notice in your conditional comments you have a . here. I don’t know whether that was a cause (about to go out) but make sure your code is valid

<!--[if lt IE 7.]>

Didn’t fix it

Hi,

Your stylesheets in the first link are a mess of conflicting and invalid rules.:slight_smile:

e.g.


#nav li:hover ul {
    text-align: center;
    background-color: #000;
    border: solid 1px #504939;
[B]    /*left: 405px;/*
    /*top: 49px;/*[/B]
    margin-left: 0;
    height: 90px;
    width: 105px;
    border-top: solid 0px;    
}




Those comments are incorrect and result in the rest of that stylesheet being commented out also! (/* a css comment */)

You also have this code way down the stylesheet that ensures the dropdown will never show:


#nav li:hover ul,
#nav li:hover ul ul,
#nav li.sfhover ul, 
#nav li.sfhover ul ul {
    margin-left:-999em;
}

The dropdown can never work with that rule in place as it will always be way off screen. If you remove that last rule then fix the comments as shown below the dropdown should work.


#nav li:hover ul {
    text-align: center;
    background-color: #000;
    border: solid 1px #504939;
  [B]  /*left: 405px;*/
    /*top: 49px;*/[/B]
    margin-left: 0;
    height: 90px;
    width: 105px;
    border-top: solid 0px;    
}

You haven’t added any of the hover rules for ie6 although you have the js in place for it (e.g. #nav li.sfhover ul{}).

You also have rules like this:


/* Set big button dimensions */
.buttons div.reply-icon        { width: {IMG_BUTTON_TOPIC_REPLY_WIDTH}px; height: {IMG_BUTTON_TOPIC_REPLY_HEIGHT}px; }
.buttons div.post-icon        { width: {IMG_BUTTON_TOPIC_NEW_WIDTH}px; height: {IMG_BUTTON_TOPIC_NEW_HEIGHT}px; }
.buttons div.locked-icon    { width: {IMG_BUTTON_TOPIC_LOCKED_WIDTH}px; height: {IMG_BUTTON_TOPIC_LOCKED_HEIGHT}px; }
.buttons div.pmreply-icon    { width: {IMG_BUTTON_PM_REPLY_WIDTH}px; height: {IMG_BUTTON_PM_REPLY_HEIGHT}px; }
.buttons div.newpm-icon        { width: {IMG_BUTTON_PM_NEW_WIDTH}px; height: {IMG_BUTTON_PM_NEW_HEIGHT}px; }
.buttons div.forwardpm-icon    { width: {IMG_BUTTON_PM_FORWARD_WIDTH}px; height: {IMG_BUTTON_PM_FORWARD_HEIGHT}px; }



Which look as though they should have been parsed by PHP before the browser sees them.

Awesome, thanks for pointing that out to me. I think I was working on this trying to get the drop down to work in IE 5 and 6, got pulled off on to something else and forgot I was in the middle of it. My problem with IE 5/6 is that the hover works, but it ends up showing really far to the right of the page and I can’t seem to do anything to tame it. (that’s what it was doing) Right now it just doesn’t work for ie5/6 at all. It is working in ie7/8 and FF though, so that’s definitely getting somewhere. :cool:

Oh, that last part is phpbb’s code, I’m not touching it.

Hi,
I think that entire syntax got into the OP’s stylesheet by mistake. That was some code from an example I posted in his other thread.

I was just showing how to set up the classes for the IE6 sfhover script.

The code above was to hide the 3rd level sublist while hovering on the 2nd level sublist items that did not have sub/ul’s

It worked in my case because I was overriding them lower down in the cascade. It was never intended to be pasted into the OP’s stylesheet, rather just an example to show the sfhover class for IE6. :slight_smile:

I think I had put it there to test quickly, then remove and that’s when I got removed from what I was doing. :blush:

I threw it back in, but inside the IF LT iE7 conditional and it didn’t help 5/6 do a thing. That’s all I just removed so that is kind of odd. I’m going to go back to the other thread to recap on what you said, but I think I’m stuck :x

You’ll need this to show the dropdown in iE6:


#nav li:hover ul,
[B]#nav li.sfhover ul [/B]{
    text-align: center;
    background-color: #000;
    border: solid 1px #504939;
    /*left: 405px;*/
    top: 49px;
    margin-left: 0;
    height: 90px;
    width: 105px;
    border-top: solid 0px;    
}


That’s all I just removed so that is kind of odd. I’m going to go back to the other thread to recap on what you said, but I think I’m stuck :x
Here is a standalone version of your menu with the IE6 script in place. I eliminated some of the repetitive rules in the css.

I got rid of the <li class=“dropdown-style”> and just set those rules on the “li li a”

Live Demo Here

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Dropnav Test</title>

<style type="text/css">

#nav, #nav ul {
padding:0;
margin:0;
list-style:none;
}
#nav {
width:1022px;
margin-left:12px;
}
#nav li,
#nav li a{
position:relative;
float:left;
text-decoration:none;
}
#nav li span{
display:none;
}
#nav li li span{
display:block;
}
#news{
float:left;
width:94px;
height:58px;
background: url("http://www.outlawracing.com/images/nav/news.jpg") no-repeat 0 0;
}
#news:hover{
background-position: 0 -58px;
}
#forums{
float:left;
width:79px;
height:58px;
background: url("http://www.outlawracing.com/images/nav/forums.jpg") no-repeat 0 0;
}
#forums:hover{
background-position: 0 -58px;
}
#classifieds{
float:left;
width:106px;
height:58px;
background: url("http://www.outlawracing.com/images/nav/classifieds.jpg") no-repeat 0 0;
}
#classifieds:hover{
background-position: 0 -58px;
}
#raceschedule{
float:left;
width:127px;
height:58px;
background: url("http://www.outlawracing.com/images/nav/raceschedule.jpg") no-repeat 0 0;
}
#raceschedule:hover{
background-position: 0 -58px;
}
#rulebooks {
position:relative;
float:left;
width:105px;
height:58px;
background: url("http://www.outlawracing.com/images/nav/classinfo.jpg") no-repeat 0 0;
}
#rulebooks:hover {
background-position: 0 -58px;
}
#standings{
float:left;
width:96px;
height:58px;
background: url("http://www.outlawracing.com/images/nav/standings.jpg") no-repeat 0 0;
}
#standings:hover {
background-position: 0 -58px;
}
#records {
float:left;
width:86px;
height:58px;
background: url("http://www.outlawracing.com/images/nav/records.jpg") no-repeat 0 0;
}
#records:hover {
background-position: 0 -58px;
}
#photogallery {
float:left;
width:125px;
height:58px;
background: url("http://www.outlawracing.com/images/nav/photogallery.jpg") no-repeat 0 0;
}
#photogallery:hover {
background-position: 0 -58px;
}
#racerprofile{
float:left;
width:164px;
height:58px;
background: url("http://www.outlawracing.com/images/nav/racerprofile.jpg") no-repeat 0 0;
}
#racerprofile:hover{
background-position: 0 -58px;
}

/*=== Sublist Styles ===*/
#nav li ul {
position:absolute;
width:105px;
left:0;
top:49px;
margin-left:-999em;
background:#000;
border:solid 1px #504939;
border-top:solid 0px;
text-align:center;
}
#nav li:hover ul,
#nav li.sfhover ul {
margin-left:0;
}
#nav li li {
float:none;
display:block;
}
#nav li li span{
display:block;
}
#nav li li a {
float: none;/*reset the float from #nav li a*/
display:block;
width:101px;
margin-left:2px;
margin-top:2px;
font-size:12px;
line-height:20px;
background-color:#18150e;
color:#FFF;
}
#nav li li a:hover {
background-color:#26230d;
text-decoration:none;
}
</style>
<!--[if IE 6]>
<script type="text/javascript">// the Suckerfish script inserts class=sfhover on all li inside id=nav on mouseover
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>
<![endif]-->

</head>
<body>

<ul id="nav">
    <li><a id="news" href="index.php?page=news" title="news"><span>News</span></a></li>
    <li><a id="forums" href="forums/" title="forums"><span>Forums</span></a></li>
    <li><a id="classifieds" href="http://www.racingjunk.com" target="_blank" title="classifieds"><span>Classifieds</span></a></li>
    <li><a id="raceschedule" href="../index.php?page=calendar" title="raceschedule"><span>Race Schedule</span></a></li>
    <li><a id="rulebooks" href="index.php?page=rulebooks" title="rulebooks"><span>Rule Books</span></a>
        <ul>
            <li><a href="index.php?page=rulebooks" title="rulebooks"><span>Rule Books</span></a></li>
            <li><a href="index.php?page=payout" title="payouts"><span>Fees &amp; Payouts</span></a></li>
            <li><a href="index.php?page=contingency" title="contingency"><span>Contingency</span></a></li>
            <li><a href="index.php?page=registration" title="registration"><span>Registration</span></a></li>
        </ul>
    </li>
    <li><a id="standings" href="index.php?page=standings" title="standings"><span>Standings</span></a></li>
    <li><a id="records" href="index.php?page=records" title="records"><span>Records</span></a></li>
    <li><a id="photogallery" href="http://prophotoproductions.exposuremanager.com/g/drag_racing" target="_blank" title="photogallery"><span>Photo Gallery</span></a></li>
    <li><a id="racerprofile" href="index.php?page=racerprofile" title="racerprofile"><span>Racer Profile</span></a></li>
</ul>

</body>
</html>