Delete trailing pipe on one item of navigation

[trixiesirish]

1) Script Title: ddsmoothmenu

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...smoothmenu.htm

3) Describe problem: How do I get rid of the trailing pipe on the last item of the horizontal navigation?

[jscheuer1]

Please clarify 'pipe'. In my experience, a pipe is this character:

|

I don't see any in the source code or the generated source code for this menu, at least not on the demo page. Do you perhaps mean the right border? If so, inline style can do that. For example, on the demo page the last item is Item 4 (from Step 2 on the demo page, addition highlighted):

<li><a style="border-right-width: 0;" href="http://www.dynamicdrive.com/style/">Item 4</a></li>

Or add a class to it:

<li><a class="lastitem" href="http://www.dynamicdrive.com/style/">Item 4</a></li>

And add this rule to the ddsmoothmenu.css stylesheet:

.ddsmoothmenu .lastitem {
	border-width: 0;
}

[trixiesirish]

I should have been more specific. I was looking at it from the point of view of a designer, not a coder. Yes, a border-right, not a pipe (although visually the effect is the same). When I get back from church, I will play with this. Thank you!

[trixiesirish]

That did not fix it at all.

<li class="lastitem"><a href="#">CONTACT US</a></li>

.ddsmoothmenu .lastitem {
border-width: 0;
}

But thanks for the effort!

[trixiesirish]

I've also asked for help on making the menu proportionally span the width of the wrapper in another topic.

I'm using Adobe's Browserlab to cross-browser and cross-platform check.

A friend posted some code to use for this particular border-right problem, and it worked, but not in IE7 or 8. The link is http://mdh-test.com/HealthySkin/index_rev.shtml

[jscheuer1]

Not:

<li class="lastitem"><a href="#">CONTACT US</a></li>

.ddsmoothmenu .lastitem {
border-width: 0;
}

Rather:

<li><a class="lastitem" href="http://www.dynamicdrive.com/style/">Item 4</a></li>

The browser cache may need to be cleared and/or the page refreshed to see changes.

If you want more help, please post a link to the page on your site that contains the problematic code so we can check it out.

[trixiesirish]

You are correct. I didn't pick up that "a." Let's try it again. That worked. Thank you!

I still need to find out how to make this menu proportionally span across the width of the image. Can you help me with that, please? On most browsers (using Adobe Browserlab), the menu is falling *several* pixels short of the right end of the main image. In a couple of cases, it overshoots the main image.