Dropdown menu problem

Nice looking site However the first thing folks here do when given a link is to hit the validate button since it is pointless trying to debug error riddled code. If you fix as many of the 74 errors as you can you might well find things start to behave as you expect.

If you still have problems post back but start your own thread. (Tyssen did it for you)

To post code highlight your code in the reply box and press the code button above it.

This will put your code in a scrollable box for the forum - easier for folks to read Thanks.

Thanks so much, I will do and report back

Hi!
Ive been through the w3c validation reports and made all the changes I can, some errors are still there but they are changes that can't be made such as links to other pages specifying categories to go to and some live chat support code that they sent over to me.
None of the current errors are in the navbar section of the code and the drop downs still don't work in IE6.
My navbar code with no errors:

<div id="navbar">
       <ul>
			<li><a href="index.htm">Home</a></li>
			<li><a href="http://www.onlineturf.co.uk/partners/onlinelogs/index.asp">Products</a>
				<ul>
    			<li><a href="http://www.onlineturf.co.uk/partners/onlinelogs/index.asp?step=2&amp;Category=logs">Logs</a></li>
                <li><a href="http://www.onlineturf.co.uk/partners/onlinelogs/index.asp?step=2&ampCategory=logs">Kindling Sticks</a></li>									                </ul>
            </li>
       </ul>
 <ul>      
	<li><a href="log-supplies.htm">Log Info</a>
 
	<ul>
	<li><a href="loguses.htm">Log Tips and Uses</a></li>
	<li><a href="logtypes.htm">Log Types</a></li>
	<li><a href="faqs.htm">FAQ's</a></li>
	<li><a href="terms.htm">Conditions of Sale</a></li>
	</ul>
 
</li></ul>
 
 
<ul>
<li><a href="team.htm">About Us</a>
 
	<ul>
	<li><a href="team.htm">Who's Who</a></li>
	<li><a href="history.htm">Our History</a></li>
	<li><a href="cameras.htm">Web Cameras</a></li>
    <li><a href="eshot.htm">Newsletters</a></li>
	</ul>
 
</li>
</ul>
 
<ul>
<li><a href="contact.htm">Contact Us</a>
 
	<ul>
	<li><a href="http://www.onlineturf.co.uk/partners/onlinelogs/feedback.asp">Feedback</a></li>
	<li><a href="links.htm">Links</a></li>
    <li><a href="sitemap.htm">Info</a></li>
	<li><a href="contact.htm">Contact Details</a></li>
	</ul>
 
</li>
</ul>
 
  </div>

Css is still the same as above

Any ideas?

Unfortunately there is no use looking at the CSS yet as there are still 74 errors. Many of these can be fixed by reading the explanation given below the error e.g.

This error means what it says, you just have to identify the line it's talking about-

and the validator is right, the doctype you are using needs the space/> on the end like the others.

Again it means exactly what it says - you may have opened one table and have two closing table tags. Mismatched pairs. You have some similar statements about

and
• tags.

Pay attention to the red errors with an "x" - the blue diamond one underneath is a helper saying "this is where you did this" the red one says "but you didn't do this or it needs that"

There is a roll-on effect with many of these and you'll be amazed how fixing one of these sometimes disposes of half a dozen error statements Try again and read the explanations carefully, you'll get the hang of it.

Some of the syntax of the javascript statements appears out of whack but I can't help you with those I'm afraid.

An ampersand (&) needs to be specified as & but again, because I'm not familiar with the statements where they're used, I can't help. However it's worth having a shot at one and seeing what happens.

When the run of the mill stuff is fixed someone will be along to help with the rest.

Hi,

Thanks for your reply, I am a wally I am using http://www.onlinelogs.co.uk/buy-logs.htm as my test page and I will roll the fixes through all the pages when Im done. I have fixed all of the above errors on this page such as the /> closing tags. however the problem still is still in place. I have tried removing the javascript for the online chat but the menus still don't work in IE6 so they can't be the cause of the issue.
I am just testing on this one page because the website is live and has alot of traffic that I don't want to confuse.

Thanks,

If you are going to use a table for layout purposes (and you shouldn't), you should specify it's dimensions in the CSS, not the html.

If you are going to specify a width in the html (and this is a bad practice, html should say nothing about style or presentation) then it should not be:

<table width="800px">

but rather:

<table width="800">

Thanks Ed but I couldn't agree more, I only occasionally use a table here and there, generally it's to display a table of results etc.
I only used it in this instance so I could have the header as a link back to the homepage (which I have removed for the time being to get the menus working properly)and to have the online live chat on the right (which I have also eliminated in order to narrow down the cause). Thanks for your advice though!

Has anyone else had this problem with menus...I read that IE cannot read a:hover? is this true?

No it isn't. IE6 and above recognize pseudo elements on anchors, but not on anything else. Other more modern browsers recognize them on all elements, as the specification calls for.

a:hover works fine with IE6.

I always have problems with menus :rolleyes: Just in case IE does need a bit of help try putting this scrap of js as the last thing before your closing head tag. Note the function is sfhover so you will need to add that to your styles e.g.

#navbar ul li:hover, #navbar ul li:sfhover { width:150px; }

<script type="text/javascript"><!--//--><![CDATA[//><!--
 
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>

Hope it helps.

Hi I did try this and I changed my css to look like this:

#navbar {
	float:left;
	width:800px;
	font-size:10px;
	border-top:1px solid #996633;
	background-color: #996633;
	position: inherit;
}
#navbar ul {
	padding:0;
	margin:0;
	list-style-type:none;
}
#navbar ul li {
	float:left;
	background-image:url(images/arrow_brown2.gif);
	background-position:left;
	background-repeat:no-repeat;
	position: relative;
	width: 150px;
}
 
#navbar ul li a, #navbar ul li a:visited {
	float:left;
	display:block;
	text-decoration:none;
	color:#FFFFFF;
	padding:0px 30px;
	line-height:25px;
	height:30px;
}
 
#navbar ul li:hover, #navbar ul li:sfhover {
	width:150px;
	color:#000000;
}
 
#navbar ul li:hover a, #navbar ul li:sfhover a {
	color:#3E1D14;
}
 
#navbar ul li ul {
display: none;
}
#navbar table {
	margin:0; 
	border-collapse:collapse;
	font-size:11px; 
	position:absolute;
	top:0;
	left:0;
}
 
/* specific to non IE browsers */
#navbar ul li:hover ul, #navbar ul li:sfhover ul {
	display:block;
	position:absolute;
	top:29px;
	margin-top:1px;
	left:0;
	width:140px;
	padding-left: 8px;
}
 
#navbar ul li:hover ul.endstop, #navbar ul li:sfhover ul.endstop {
left:-90px;
}
#navbar ul li:hover ul li ul, #navbar ul li:sfhover ul li ul {
display: none;
}
#navbar ul li:hover ul li a, #navbar ul li:sfhover ul li a {
	display:block;
	color:#fff;
	height:auto;
	line-height:15px;
	width:120px;
	background-color: #351B00;
	padding: 4px 16px;
}
#navbar ul li:hover ul li a:hover, #navbar ul li:sfhover ul li a:hover {
	color:#FF9900;
	background: #663300;
}
 
#navbar ul li:hover ul li:hover ul, #navbar ul li:sfhover ul li:sfhover ul {
	display:block; 
	position:absolute; 
	left:153px; 
	top:-15px; 
	color:#000; 
	left:152px; 
	height:138px; 
	width:172px; 
	overflow:auto; 
	background:#888;
}
#navbar ul li:hover ul li:hover ul li a, #navbar ul li:sfhover ul li:sfhover ul li a {background:#888;}
#navbar ul li:hover ul li:hover ul li.group, #navbar ul li:sfhover ul li:sfhover ul li.group {width:152px; padding:5px 0;}
 
 
#navbar ul li:hover ul li:hover ul.left, #navbar ul li:sfhover ul li:sfhover ul.left {
left:-172px;
}
#navbar ul li:hover ul li:hover ul li a:hover, #navbar ul li:sfhover ul li:sfhover ul li a:hover {
	background:#666;
	color:#996633;
}

However when i uploaded this it stopped the menus working in any browser so I have had to revert back to the old version.
argh?!

I'm so sorry if I've sent you on a wild goose chase, however all may not be lost.

Weeeeelll...if you're up for one more try...
Since the "cavalry" hasn't arrived yet, I have just implemented a centered menu which comes from "Centering a Drop Down Menu", but csshover.htc from Peterned (which this example uses to make IE hovers work) stopped working for me so I inserted the Suckerfish javascript I gave you above and it works.

I know you don't want a centered menu but the only thing keeping my menu centered is the #navholder that I put in - if you remove that it should sit left and may work for you. All you should need to do is adjust the width of #nav and the "width: 127px" you'll find all over the place (and the colours of course). Ignore the red bit on the end, I'm still tweaking (take background:red out of #nav).

The top items are evenly spaced and the drop downs match the width of the top item. I have changed the widths to px because I needed it to fit in 780px which is the min-width of my liquid page. You can see my adjusted version here and the code is below (anything indented is my changes). It's very messy at the moment, but it validates and it works in IE6 and FF2 - don't know about others yet -

#navholder
{
  text-align: center;
/*  color: blue;  */
  width: 780px;
	   margin: 8px auto;
}
 
 
 
#nav { 
	float: left;
	width: 780px;
	text-align: center; 
	text-transform: uppercase;
	font-size: 0.9em;
	   font-weight: bold;
	   margin: 10px auto;
	   list-style: none;
	   background: red;
}
 
/*
#nav ul { 
  width: 780px;
	margin: 0 auto;
	list-style: none;
}
*/		
 
#nav li { 
	float: left;
	position: relative;
	   width: auto;
}
 
 
#nav a { 
	display: block;
	width: 127px; 
	color: #FFF8DD;
	background-color: #E9A844;
	text-decoration: none;
		  padding: 8px 0;
}
 
#nav ul a {
  background: #E9A844;
  color: #FFF8DD;
  text-transform: none;
  text-decoration: none;
}
 
#nav a:hover { background-color: #C11B1B; }
 
#nav li ul { 
	display: block;
	position: absolute; 
	width: 127px; 
	left: -999em;
} 
 
#nav li:hover ul, #nav li.sfhover ul { left: 0 }
 
#nav li li {  display: block }
 
#nav ul a {padding: 3px 0;}
 
 
	</style>
 
 
<script type="text/javascript"><!--//--><![CDATA[//><!--
 
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>

:shrug: It still hasn't worked, ive tried everything.

What code is in the test site now?

ETA:
Never mind I can see you've put your own back. Can you do me a favour and comment out all of your own css menu and then just copy mine into your HTML so I can see what it looks like? It's getting late here but I'll stay online for a while.

PS - don't change anything - just recopy it from the post above and plonk it in there - red, sizing and all.

Hi,

I have moved to this test location so I wasn't working on the live site anymore and your code is still present here:

http://www.onlineeverything.co.uk/buy-logs.htm

Thanks Smee

okay give me a bit to see if I can suss it.

I'm still seeing your code - I've cleared cache and force refreshed.

...yours works! Ive compaired both of them

http://www.onlineeverything.co.uk/test.html

Yes but we only want one menu in there. If mine will work for you then we can just tweak it. However what I just saw was 3 lots of menu code :?

one lot of mine in the html and one in the css as well as your own naturally.
Now try taking mine out of the css. Comment out your own and let's see if the one in the html still works..

Yes it worked!! I think it had to many different different styles to follow!
Thank you sooooo much for your help!!!!
:thumbsup:

Yes it worked!! I think it had to many different different styles to follow!
Thank you sooooo much for your help!!!!
:thumbsup:

Well we're getting closer at any rate

But I should be seeing your menu items in there - mine are still there. Your html div id is #navbar I can see that but it should be reading the ul/li information into the new menu structure.

You need to comment out the "non IE specific browser" nav code as well. This menu will take care of that.

ETA:
Sorry just saw the /* underneath the heading. :rolleyes:

I do think it is still being overridden by something since the drop downs should just about line up. You wrapper is 800px the #navholder is 780px. :?

Do you have the Firebug extension? If not I strongly suggest you download it before going further, it's a brilliant little thing which shows you where everything is simply by hovering over the code which appears at the bottom of your screen.

There is still a conflict with the navholder - see how it's pushed over?

Anyway...are you good to go now?

No I don't have firebug, but i will download it now. Yeh im good to go now, still a bit of a re-work but at least its displaying correctly!
Thanks for your help smee!!!

:thumbsup: :thumbsup: :thumbsup:

Oh also a GREAT Firefox add on I use is "web developer" its fab!

Okay then - pleased I could help. You might try taking the nav out of #content and see if that helps with the remaining conflict with the drop downs. Firebug will show you. I have web dev toolbar too but Firebug is a whole other ballgame.

You need to zero out the margins/padding on #nav li ul.