CMS Made Simple Forums

Hi

I'm using a free template called handyman and am having a headache with the navigation menu as it renders completely differently in different browsers.

IE - looks fine. Wording evenly spaced and padded
FF - No top or bottom padding
Chrome - Padding good but text aligned to top

I've simplified the template a little but here is what the header should look like
http://blog.templatemonster.com/2011/10 ... intenance/

Some help with this would be gratefully received.

Website uses CMS MS - Isabella.

As always a link to the problem site is best...

Problem website is www.handcoded.co.uk/spencer

Have you tried specifying a height and line-height for the whole menu bar? If they're both set to the same value, this will vertically-align your text. Get rid of any top or bottom padding/margins on the text as well.

So it turns out that I had some un-ordered list code in my template which was conflicting with the menu and my problem is now resolved.

The last link on the navigation bar should have a class on it called last that curves the right edge.

I've looked at my menu template but cannot work out how I can define a class for the last menu link. Any ideas?

Thanks

There are several ways:

Option 1
If you want to manually specify which the last link is, you can do the following:

1. Add this code to the LI (or A) in your menu template:
This will output something like <li class="nav-projects">.

2. Create a new CSS class in your stylesheet called "li.nav-projects" and style as required.

Option 2
Automatically apply a "last" class using Smarty. Example here: http://www.i-do-this.com/blog/10/Add-cl ... -menu-item

Option 3
Use CSS and/or jQuery to automatically apply a style to the last child element.

CSS: jQuery:

Very thorough.

Thanks very much