Menu not w0rking in Mozilla [Archive]

Click to See Complete Forum and Search --> : Menu not w0rking in Mozilla

mike444

09-19-2005, 09:45 AM

I borrowed this freeware menu from this site:

http://www.dynamicdrive.com/dynamicindex1/switchmenu2.htm

(Menu is on page, "Switch menu 2")

I tried asking for help in their forums but no one has responded.

It's not showing up in Mozilla. I only changed parameters like, background colors, text size, colors and font family, menu size, etc. Works fine in IE. Anyone have any tips/suggestions? Maybe someone has worked with similiar menus before?

BonRouge

09-19-2005, 10:21 AM

I'd have to see your page. The menu you pointed to works fine in Firefox.

mike444

09-19-2005, 10:42 AM

Here is the page. It's actually not showing up in IE online correctly as well. Offline in IE it's fine.

http://www.warlike.ms11.net/mglinks.html

Thanks.

pointfiftyae

09-19-2005, 10:48 AM

The menu part is somehow seen as comments. I don't quite get it, when I copied the code, saved it in a file and opened it (with FF) it worked fine. Any idea?

EDIT : apologies, it won't work. are your tags properly nested? (<p><span></span></p> and not <p><span></p></span>)

mike444

09-19-2005, 10:49 AM

I got it to show in IE now but the menu doesn't open.

Here's the css:

.mainDiv
{
width:120px;
}
.topItem
{
width:120px;
height:10px;
cursor:pointer;
background: #999900;
text-decoration:underline;
color: black;
font-weight:bold;
font-family:"Comic Sans";
padding-left:1px;

}

.dropMenu
{
background:#000000;
border-top:1px solid #000000;
border-left:1px solid #000000;
border-right:1px solid #000000;
border-bottom:1px solid #000000;
}

.subMenu
{
display:none;

}
.subItem
{

padding-left:5px;
cursor:pointer;
font-weight:none;
text-decoration:none;
color:green;
}

.subItem a
{
text-decoration:none;
color:#009900;
}

.subItemOver
{

cursor:pointer;
color:black;
text-decoration:none;
font-weight:none;
padding-left:15px;

}

.subItemOver a
{
color:green;
}

.drop
{
border-left:1px solid black;
border-right:1px solid black;
}

mike444

09-19-2005, 10:52 AM

The menu part is somehow seen as comments. I don't quite get it, when I copied the code, saved it in a file and opened it (with FF) it worked fine. Any idea?

I forgot to upload the css file at that point. Sorry. You should SEE the menu it IE now but, again, it doesn't open and it still doesn't appear in Mozilla. Thanks.

pointfiftyae

09-19-2005, 10:55 AM

Hm. Your menus are in a div with the .subMenu class, which is set to display:none; . Is it normal? could this be the reason ?

mike444

09-19-2005, 10:56 AM

EDIT : apologies, it won't work. are your tags properly nested? (<p><span></span></p> and not <p><span></p></span>)

Would the menu work offline if they weren't? The menu works perfectly in IE OFFLINE but online, it won't open.

drhowarddrfine

09-19-2005, 10:59 AM

VALIDATE YOUR CODE. You have 31 errors plus css errors.

pointfiftyae

09-19-2005, 11:03 AM

Good advice to start seeing clearly. For example, avoid <head>
<title>Welcome to warlikeway.com - the best of the military video game scene!</title>

<link rel="stylesheet" type="text/css" href="images124.css">
<link rel="stylesheet" type="text/css" href="sddm.css" />

</head>
<center><body>
<center> must be inside <body>. As a matter of fact, stop using <center> and use <span style="text-align:center;">. Close both of your <link /> tags, too.

pointfiftyae

09-19-2005, 11:05 AM

Would the menu work offline if they weren't? The menu works perfectly in IE OFFLINE but online, it won't open.

I bet everything would work in IE, whether online or offline (which makes quite no difference, since we're not talking about dynamically generated content).

pointfiftyae

09-19-2005, 11:07 AM

Btw, I can't access to the "menu.js" file : "File not found" says your web hoster.

mike444

09-19-2005, 11:20 AM

I had forgotten to upload the .js file as well. sorry. It finally should work in IE but I had the links within the menus set to a small font and now they're displaying bold or larger.

mike444

09-19-2005, 11:28 AM

Good advice to start seeing clearly. For example, avoid [HTML]. Close both of your <link /> tags, too.

My links tags aren't closed? I tried removing my center tags and relacing it with span in my offline copy but now my site is not centered on the screen.

pointfiftyae

09-19-2005, 11:28 AM

set it here : .subItem
{

padding-left:5px;
cursor:pointer;
font-weight:none;
text-decoration:none;
color:green;
font-size: blahblah
}

mike444

09-19-2005, 11:34 AM

That worked, thanks.

How accurate is the w2 validator?

The first error it came up with was:

"# Error Line 14 column 6: end tag for element "HEAD" which is not open.

</head>

The Validator found an end tag for the above element, but that element is not currently open. This is often caused by a leftover end tag from an element that was removed during editing, or by an implicitly closed element (if you have an error related to an element being used where it is not allowed, this is almost certainly the case). In the latter case this error will disappear as soon as you fix the original problem.

If this error occured in a script section of your document, you should probably read this FAQ entry."

I checked the head tags and I didn't see anything wrong or missing.

pointfiftyae

09-19-2005, 11:40 AM

I guess this is because one of your two <link /> tags is missing the final " /" that indicates that it is closed. That's what I meant by "close your link tags" :)

mike444

09-19-2005, 12:01 PM

I realize my page has errors but is there anyway I can narrow down which error(s) are contributing to the switch menu not showing up in Mozilla. Then I can address the other problems.

pointfiftyae

09-19-2005, 12:07 PM

I think we have it !
Line 67 column 94: document type does not allow element "LI" here; missing one of "UL", "OL", "DIR", "MENU" start-tag.

...mOver" onMouseOver="Init(this);" ><li>official sites</li></div>

The mentioned element is not allowed to appear in the context in which you've placed it; the other mentioned elements are the only ones that are both allowed there and can contain the element mentioned. This might mean that you need a containing element, or possibly that you've forgotten to close a previous element.

One possible cause for this message is that you have attempted to put a block-level element (such as "<p>" or "<table>") inside an inline element (such as "<a>", "<span>", or "<font>").

<li></li> must be in an <ul></ul> or <ol></ol> element.

pointfiftyae

09-19-2005, 12:12 PM

Also : put spaces in your comments. If you don't, the browser doesn't seem to understand it as "comment start - comment - comment end"


I think this is the orginal bug we were hunting...

mike444

09-19-2005, 12:31 PM

That's the bug? I put spaces, no visible effect.

Here's my code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Welcome to warlikeway.com - the best of the military

video game scene!</title>

<link rel="stylesheet" type="text/css" href="images124.css" />
<link rel="stylesheet" type="text/css" href="sddm.css" />

</head>
<body><span style="text-align:center;">
<OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"

codebase="http://download.macromedia.com/pub/
shockwave/cabs/flash/swflash.cab#version=4,0,2,0" width="726"

height="42">
<PARAM name="movie" value="Doors6.swf">
<PARAM name="quality" value="high">
<PARAM name="menu" value="true">
<EMBED src="Doors6.swf" quality="high" menu="true"

pluginspage="http://www.macromedia.com/shockwave/
download/index.cgi?P1_Prod_Version=ShockwaveFlash"

type="application/x-shockwave-flash" width="726" height="42">
</EMBED>
</OBJECT><div class="wrapper">
<img

src="http://img398.imageshack.us/img398/9849/2logo7fy.jpg">

<div class="left" style="font-weight: bold; margin: 5px; height:

100%; width: 150px;" align="center"><br><a

href="http://com5.runboard.com/bwarlikewayforums"><img

src="http://img319.imageshack.us/img319/352/warway7vx.jpg"></a>



<SCRIPT TYPE="text/javascript">



</SCRIPT>
<FORM ACTION="http://www.ballot-box.net/service/poll.vote.php"

METHOD="POST" TARGET="popup">
<INPUT TYPE="hidden" NAME="poll" VALUE="81312">
<INPUT TYPE="hidden" NAME="popup" VALUE="1">
<TABLE BGCOLOR="Black" BORDER="0" CELLSPACING="0" CELLPADDING="0"

WIDTH="147">
<TR><TD><TABLE BORDER="1" CELLSPACING="0" CELLPADDING="2" WIDTH="100%">
<TR BGCOLOR="Black"><TD ALIGN="CENTER">
<FONT FACE="Arial" COLOR="Olive" SIZE="2">
<B>Poll</B></FONT></TD></TR>
<TR><TD BGCOLOR="Olive">
<FONT FACE="Verdana" COLOR="black" SIZE="1">
<B>What is the best military game to play online?</B><BR><BR>
<INPUT TYPE="checkbox" NAME="answer[1][]" VALUE="1"> Socom II<BR>
<INPUT TYPE="checkbox" NAME="answer[1][]" VALUE="2"> Black Hawk

Down<BR>
<INPUT TYPE="checkbox" NAME="answer[1][]" VALUE="3"> Rainbow Six<BR>
<INPUT TYPE="checkbox" NAME="answer[1][]" VALUE="4"> Battlefield 2<BR>
<INPUT TYPE="checkbox" NAME="answer[1][]" VALUE="5"> Call Of Duty<BR>
<INPUT TYPE="checkbox" NAME="answer[1][]" VALUE="6"> Battlefronts<BR>
<INPUT TYPE="checkbox" NAME="answer[1][]" VALUE="7"> Killzone<BR>
<BR><CENTER><INPUT TYPE="submit" VALUE="Submit Vote"

OnClick="Start('');">
<BR><A

HREF="http://www.ballot-box.net/service/poll.results.php?poll=81312&pop

up=1" OnClick="Start(this.href);return false;" TARGET="_blank"><font

color="#000000">View Results</font></A>
</FONT></TD></TR>
</TABLE></TD></TR></TABLE></FORM>


</div>

<div class="border content padleft" style="padding-left: 20px;"

ALIGN="left"><br><font color="#999900"><b>Official & related website

links:</b></font><br><br>

<script language="JavaScript" type="text/javascript"

src="menu.js"></script>



<div class="mainDiv" state="0">
<div class="topItem" classOut="topItem" classOver="topItemOver"

onMouseOver="Init(this);" >official sites</div>
<div class="dropMenu" >
<div class="subMenu" state="0">
<span class="subItem" classOut="subItem"

classOver="subItemOver"><a href="http://www.ensemblestudios.com/">Age

Of Empires</a></span><BR />
<span class="subItem" classOut="subItem"

classOver="subItemOver"><a

href="http://www.riseofasoldier.com/us/">America's Army</a></span><BR

/>
<span class="subItem" classOut="subItem"

classOver="subItemOver"><a

href="http://battlefield.ea.com/">Battlefield 2</a></span><BR />
<span class="subItem" classOut="subItem"

classOver="subItemOver"><a

href="http://www.brothersinarmsgame.com/us/agegate.php?destURL=index.ph

p">Brothers In Arms</a></span><BR />
<span class="subItem" classOut="subItem"

classOver="subItemOver"><a href="http://www.callofduty.com/">Call Of

Duty</a></span>
</div>
</div>
</div>



<BR />



<div class="mainDiv" state="0">
<div class="topItem" classOut="topItem" classOver="topItemOver"

onMouseOver="Init(this)" > unofficial sites</div>
<div class="dropMenu" >
<div class="subMenu" state="0">
<span class="subItem" classOut="subItem"

classOver="subItemOver"><a href="http://www.slashdot.org">Slash

Dot</a></span><BR />
<span class="subItem" classOut="subItem"

classOver="subItemOver"><a

href="http://news.com">News.com</a></span><BR />
<span class="subItem" classOut="subItem"

classOver="subItemOver"><a href="http://wired.com">Wired

News</a></span>
</div>
</div>
</div>



<BR />



<div class="mainDiv" state="0">
<div class="topItem" classOut="topItem" classOver="topItemOver"

onMouseOver="Init(this)" >related sites</div>
<div class="dropMenu" >
<div class="subMenu" state="0">
<span class="subItem" classOut="subItem"

classOver="subItemOver"><a href="http://cnn.com">CNN</a>
</span><BR />
<span class="subItem" classOut="subItem"

classOver="subItemOver"><a href="http://msnbc.com">MSNBC</a></span><BR

/>
<span class="subItem" classOut="subItem"

classOver="subItemOver"><a href="http://news.bbc.co.uk">BBC

News</a></span>
</div>
</div>
</div>



<br><br><br><br><br>

<font color="#cc0000">Search for all the best & latest in

military video games @:</font>
<p><a href="http://www.eyeammo.com"><img

src="http://img185.imageshack.us/img185/9959/eye0ky.jpg"

width="80%"height="150" border=0></a></p>

<br />
</div>
<br style="clear: both;" />
<div class="border footer">Copyright 2005 -

warlikeway.com</div>
</div></span>
</body>
</html>

mike444

09-19-2005, 12:40 PM

I think we have it !

<li></li> must be in an <ul></ul> or <ol></ol> element.

there is no valid substitute for "list item"?

mike444

09-19-2005, 12:53 PM

Well, the problem is not in my css document because I replaced it with the original script document and it's still not showing on my page in Mozilla. So it must be in the html document.

pointfiftyae

09-19-2005, 01:03 PM

No, you didn't put spaces. Instead of

you must have

to clearly delimit where the comment starts and ends.

mike444

09-19-2005, 01:10 PM

Okay, I think it's the Doc type. I inserted the below into a test page and the menu disappeared.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Is there an alternate I can use?

PhillMc

09-19-2005, 01:43 PM

First, center cannot appear outside of the body; that, and center is depreciated.

Next, you have Returns in some of your declarations:
<div class="wrapper"><OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/
The above is just an example; do not use linebreaks in the middle of an opening or closing tag.

Also; you are using a lot of proprietary attributes (e.g. classover, classout) - I'm not sure if this is causing your problem, but it will hurt your accessiblity.

Also, if you're using the 4.01 Trans doctype, you probably shouldn't be closing you link tags (e.g. <link type="foo" rel="bar" / >) as this is XHTML syntax -- I could be wrong on this one.

As for your menu (I'm assuming you're talking about the flash menu) it's working fine in Mozilla Firefox.

pointfiftyae

09-19-2005, 01:53 PM

The menu that is not working is the one that should appear below "Official and Related Links". And mike444, the problem is not the doctype but the syntax you are using: if you specify that your page respects the standards of html 4.01, then it should respect them. But it's not nearly the case: I'd advice you to validate your code. I'm ready for any help :)

mike444

09-19-2005, 02:21 PM

The validator:

"invalid comment declaration: found name start character outside comment but inside comment declaration.

"

What does this mean? have lots of these.

pointfiftyae

09-19-2005, 04:47 PM

I don't really know... First I hought it was about the <!----- thing, but obviously not... :) Maybe "-"s are problematic... no idea.

mike444

09-20-2005, 10:30 AM

I guess it must be the way I'm altering content. I'm using alot of html font crap.

What is the normal designator for "content" in css? If I use <p> tags in the html page can I designate content as .p {} etc in css?

pointfiftyae

09-20-2005, 11:07 AM

hm...
for a <p> tag use p {...} in css. for a <p class="foo"> use p.foo {}, and for a <p id="bar"> use p#bar. The difference between classes and ids is that you can use tags with the same class several times in a page, on the opposite an id is unique.