css not matching

80 Posts

tat2d Reply #1, 16 years, 11 months ago

I’m not sure if this is the right place to post this, so I apologize if it isn’t.

I have a style set for unordered lists and when I code the list with html, it displays correctly. When I add the WayFinder elements, the style sheet doesn’t match. (see attachment)

Here is the code of the chunk:

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

here is the code for the template with WayFinder

<ul class="leftNavItem">
    		[[Wayfinder? &startId=`1`]]
</ul>

Here is the code without WayFinder

<ul class="leftNavItem">
                
                <li><a href="home.shtml">Home Cleaning Services</a></li>
                <li><a href="#">Commercial Cleaning Services</a></li>
                <li><a href="#">Property Preservation</a></li>
                <li><a href="#">Why choose Value Cleaning?</a></li>
    		</ul>

Anyone know what I’m doing wrong?

Teaching myself MODx

145 Posts

digitalime Reply #2, 16 years, 11 months ago

What do your Wayfinder templates look like?

Have a look at the outputted source code. I think Wayfinder may be adding some classes of its own, and that is why it does not behave as it should with your existing CSS declarations.

2,310 Posts

bunk58 Reply #3, 16 years, 11 months ago

<li[+wf.id+][+wf.classes+]>

Will add the Wayfinder default id & classes to your html <li>’s.
The example you give shows no classes or id’s are needed.

80 Posts

tat2d Reply #4, 16 years, 11 months ago

Quote from: bunk58 at Nov 11, 2009, 12:21 PM

<li[+wf.id+][+wf.classes+]>
Will add the Wayfinder default id & classes to your html <li>’s.
The example you give shows no classes or id’s are needed.

I took those two elements out and nothing changed.

Teaching myself MODx

2,310 Posts

bunk58 Reply #5, 16 years, 11 months ago

What is Wayfinder producing as output?

80 Posts

tat2d Reply #6, 16 years, 11 months ago

What do you mean? It shows the correct links but it adds a bullet and indents the list.

Teaching myself MODx

2,310 Posts

bunk58 Reply #7, 16 years, 11 months ago

If Wayfinder is outputting a plain un-ordered list as required, then it’s likely to be a CSS issue.

241 Posts

bob1000 Reply #8, 16 years, 11 months ago

Are you getting nested lists in your output?

Your Wayfinder call is placed inside <ul> tags but Wayfinder wraps the output in <ul> tags by default which would create a nested list.

Try moving your <ul> tags into an outerTpl chunk:

[[Wayfinder? &startId=`1` &outerTpl=`leftNav`]]

leftNav chunk:

<ul class="leftNavItem">
	[+wf.wrapper+]
</ul>

80 Posts

tat2d Reply #9, 16 years, 11 months ago

Quote from: bob1000 at Nov 11, 2009, 05:11 PM

Are you getting nested lists in your output?

Your Wayfinder call is placed inside <ul> tags but Wayfinder wraps the output in <ul> tags by default which would create a nested list.

Try moving your <ul> tags into an outerTpl chunk:
[[Wayfinder? &startId=`1` &outerTpl=`leftNav`]]
leftNav chunk:
<ul class="leftNavItem">
	[+wf.wrapper+]
</ul>

I used the example you gave me, and it didn’t use the style. How do I tell it to use the correct style?

Teaching myself MODx

241 Posts

bob1000 Reply #10, 16 years, 11 months ago

Post back the Wayfinder call you are using, any template chunk code and the CSS code for the menu and we can take a look.