Top menu items not styled correctly... Little Help???

Hi guys,
I’m having difficulty with my wayfinder menu, it is showing the top menu items as normal text.
In the css the top menu items are supposed to be styled.

Can some one take a look? website is www.williambayphotography.com.

I am using the "Dropdown" example from muddydogpaws site. All chunks and snippit calls are accurate.
Thanks for any help in advace.
William

CSS below:

/* CSS Document */

body {
background:url(pics/57original.gif);
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
}
p{
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
color:#333;
}

li{
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
color:#333;
}
#wrap {
margin: 25px auto 0px;
width:600px;
background-color:#fff;
}
#top {
width:600px;
height:200px;
}
#header {
background: #333;
background-image:url(pics/menuright.png);
background-position:right;
background-repeat:no-repeat;
height:30px;
border: 1px solid #000;
}
#ds {
background:url(pics/dropshadow.png);
background-repeat:repeat-x;
height:20px;
}
#container {
width: 600px;
float: left;
margin-right: -230px;
background: #fff;
margin-bottom:25px;
}
#flashcontainer {
width: 600px;
background: #fff;
text-align:center;
margin-bottom:25px;
}
#sidebar {
width: 220px;
float: right;
border-left:#333 1px solid;
padding-top:0;
margin-bottom:25px;

}
#footer {
background: #333;
clear: both;
height:30px;
border: 1px solid #000;
}
#content {
background: #fff;
margin-right: 230px;
margin-left:10px;
}

.credits{
width:auto;
margin:10px auto;
font:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
color:#fff;
text-align:center;
}

.credits a {
color:#fff;
text-decoration:underline;
}

.credits a:hover {
color:#999;
}

#menu {display:block; width:200px; margin:0 auto;}

#menu ul {margin:0; padding:0; list-style-type:none;}

#menu li {float:left; width:200px; height:67px;}


#menu li.list1 {background:transparent url(rightmenu/right_thumb_1.jpg);}
#menu li.list2 {background:transparent url(rightmenu/right_thumb_2.jpg);}
#menu li.list3 {background:transparent url(rightmenu/right_thumb_3.jpg);}
#menu a {display:block; width:200px; height:67; padding-top:67px; color:#000; overflow:hidden;}


* html #menu a:link, * html #menu a:visited {height:67px; height:0;}


#menu a#item1 {background:transparent url(rightmenu/right_thumb_1_over.jpg) -130px -90px no-repeat;}
#menu a#item2 {background:transparent url(rightmenu/right_thumb_2_over.jpg) -130px -90px no-repeat;}
#menu a#item3 {background:transparent url(rightmenu/right_thumb_3_over.jpg) -130px -90px no-repeat;}


#menu a#item1:hover {background-position:0 0; z-index:50;}
#menu a#item2:hover {background-position:0 0; z-index:50;}
#menu a#item3:hover {background-position:0 0; z-index:50;}


/* common styling */
/* set up the overall width of the menu div, the font and the margins */

.menu {
font-family: arial, sans-serif;
font-size:12px;
font-weight:bold;
margin-left:5px;
width:300px;

}
/* remove the bullets and set the margin and padding to zero for the unordered list */
.menu ul {
padding-left:5px;
padding:0;
margin:0;
list-style-type: none;
margin-left:5px;
margin-right:5px;
color:white;
font-weight:bold;

}
/* float the list so that the items are in a line and their position relative so that the drop down list will appear in the right place underneath each list item */
.menu ul li {
float:left;
position:relative;
margin-left:5px;
margin-right:5px;

}
/* style the links to be 104px wide by 30px high with a top and right border 1px solid white. Set the background color and the font size. */
.menu ul li a, .menu ul li a:visited {
display:block;
text-align:center;
text-decoration:none;
height:22px;
color:#fff;
background:#333;
padding-top:8px;
margin-left:5px;
margin-right:5px;

}
/* make the dropdown ul invisible */
.menu ul li ul {
display: none;
margin-left:5px;
margin-right:5px;
}

/* specific to non IE browsers */
/* set the background and foreground color of the main menu li on hover */
.menu ul li:hover a {
background:#505050;
margin-left:5px;
margin-right:5px;
}
/* make the sub menu ul visible and position it beneath the main menu list item */
.menu ul li:hover ul {
display:block;
margin-left:5px;
margin-right:5px;
}
/* style the background and foreground color of the submenu links */
.menu ul li:hover ul li a {
display:block;
background:#505050;
color:#fff;
margin-left:5px;
margin-right:5px;
}
/* style the background and forground colors of the links on hover */
.menu ul li:hover ul li a:hover {
background:#505050;
color:#fff;
margin-left:5px;
margin-right:5px;
}

Do you mean what you have at: http://www.williambayphotography.com/ ?

Please let me know.

Cheers,

Jay

shoot!!!
Yes,
I’m sorry www.williambayphotography.com

I think that is the one.

the problem is that you are using classes but the css file is looking for an ID:
<ul class="menu">

but css says #menu which is an ID

Oh... and me and Steve McQueen - My 2003 Nissan X-Terra

So Steve McQueen is the name of the car? LOL, that is funny, I was trying to find the story on Steve McQueen (the human)

Nice sites, and the intro page is very nice.

The CSS file actually contains references to both a #menu and .menu I assume that the #menu is the one for the other sections of the site?

I personally find that the CSS play dropdowns are a killer for newbs it is complex and full of traps. (and I hate dropdown menus)

I’ll look at it in a bit.

Cheers,

Jay

Here’s a quick fix to get it working, ready for you to tweak it.
Replace all the .menu tags in the CSS with this:

You’ll see I’ve changed some colours an sizes in an effort to show what does what.
Change the appropriate Wayfinder template, probably named outer, from outputting

to output:


David

Thanks Jay,
I appreciate you looking into that. Yes, Wayfinder has been a killer for me. Everything else in modx is great. This has put me over a bit.

Dev_CW: Thanks for the comments, I’d like to update my Steve McQueen blog more. The naming went from "Silver Bullet" to "Bullit" (the movie) to "Steve McQueen". Now it’s no 1968 Ford Mustang Fastback GT390 but it’s 6 cyl does roar.
The Thailand blog is nice to keep as a record of a very cool time in my life after the tsunami. I occasionally throw up old stories as I actually finish them.


David(bunk 58),
I have replaced the items in css and have modified my code in my "outer" chunk to this below.

<div[+wf.classes+]>
<div>
[+wf.wrapper+]
</div>
</div>

Is this correct? The menus are still not quite there... One thing to point out is the pictures on the right are also menus but those are divs not classes. I’m not sure there should be a conflict between them however.

Thanks all for the support!

Nearly, but not quite.
Current Wayfinder output is:

Needs to be:

It’s difficult to explain/correct without seeing your Wayfinder call and template chunks

Here is what I have... Any suggestions? I’m curious why it seems to be so hard to create a simple drop down menu... It’s rather frustrating since I grabbed a template to use.

<div id="header">[[Wayfinder? &startId=`0` &level=`2` &parentClass=`hide` &parentRowTpl=`cssplay_parentRow` &outerTpl=`cssplay_outer` &innerTpl=`cssplay_inner` &rowTpl=`cssplay_row` &outerClass=`menu` &cssTpl=`cssplay_dropdown`]] </div>

---

&cssTpl=`cssplay_dropdown`

<link rel="stylesheet" media="all" type="text/css" href="assets/templates/default/newcss.css" />
<!--[if lte IE 6]>
<link rel="stylesheet" media="all" type="text/css" href="assets/templates/default/newcss.css" />
<![endif]-->

---

&innerTpl=`cssplay_inner`

<ul>
[+wf.wrapper+]
</ul>

---

&outerTpl=`cssplay_outer`

<div[+wf.classes+]>
<div>
[+wf.wrapper+]
</div>
</div>

---

&parentRowTpl=`cssplay_parentRow`

<li><a [+wf.classes+] href="[+wf.link+]" title="[+wf.title+]">[+wf.linktext+]</a>
<!--[if lte IE 6]>
<a class="sub" href="[+wf.link+]" title="[+wf.title+]">[+wf.linktext+]
<table><tr><td>
<![endif]-->
[+wf.wrapper+]
<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->
</li>

---

&rowTpl=`cssplay_row`

<li[+wf.classes+]><a href="[+wf.link+]" title="[+wf.title+]">[+wf.linktext+]</a>[+wf.wrapper+]</li>