Hi, I have a problem where my menu generated by wayfinder wont display properly. It works fine but wont display properly. On any active menu button, the button becomes weird. It has a dotted line all around the button, and a bunch of extra green on the left where it shouldn’t exist. You can see it here:
http://lodd.66ghz.com/
Sorry bout the site, still building it.
Funny thing is that this problem occurs in Opera and Firefox, but not in IE6... (I dont know about IE7) And all this time i’ve been using Opera... Lol.
Anyway, I tried to fix it but I’m not that good with css OR with wayfinder so I’m not entirely sure what the problem is. I checked the wayfinder template chunk that I’m using and it seems ok.
<li[+wf.id+][+wf.classes+]>
<a href="[+wf.link+]" title="[+wf.title+]" [+wf.attributes+]><span>[+wf.linktext+]</span></a>
[+wf.wrapper+]</li>
I checked my coding in case I referenced something wrongly or misspelt my css classes (wouldn’t be the first time) but it was all ok.
I even went as far as to change my doctype from xhtml1.0 Strict to Transitional to see if that would help but still nothing.
Therefore I’d like to ask for help here because if you don’t know something, you should ask the smarter guys right? (Yes, that was blatant flattery. I’ll do anything to fix this problem.) Any help will be greatly appreciated.
#menu
{
float: right;
height: 23px;
margin-top: 35px;
}
#menu a
{
color: #fff;
background-image: inherit;
text-decoration: none;
padding-left: 10px;
line-height: 23px;
font-weight: bold;
}
#menu a span
{
padding-right: 10px;
}
#menu a, #menu a span
{
display: block;
float: left;
}
#menu a:hover, #menu .current
{
color: #fff;
background-image: url(images/tabl.gif);
background-color: #a9bc52;
background-repeat: no-repeat;
background-position: left top;
padding-left: 10px;
height: 23px;
}
#menu a:hover span, #menu .current span
{
background-image: url(images/tabr.gif);
background-repeat: no-repeat;
background-position: right top;
padding-right: 10px;
height: 23px;
cursor: pointer;
}
#menu ul
{
list-style: none;
padding: 0;
margin: 0;
}
#menu li
{
float: left;
margin-top: 0;
margin-right: 0;
margin-bottom: 0;
margin-left: 5px;
}
P.S. I’ve only had ModX for 3 days now but I’m LOVING IT!!!
