separator padding/colour problem!

[Bozzy]

Hi All,

here is the menu i am working on. http://www.blueotwo.com/temp/menu/index.htm

if you click on home, it takes you to the index page and highlights the home button as white. However you will notice that the left hand side of the separaotr line remains grey.

How can I fix this? I have already tried changing all the color values of page/separator and also using a separator image (currently being used) which is the dark grey bar with transparency either side.

Please help if you can

[vikenk]

Can you post your menu_data.js file in the forum? Try as I might, I could not find it, even though I followed the path in your source code.

This may be a separator padding issue. If there is separator padding, the color of the padding takes on the properties of the menu BG color, I believe.

Also, the padding does not count in the Menu Item space. I don't quite have the right works to describe this, so I hope it makes some sense: If you specify a PAGEBG color, the menu item ONLY changes color - margin and padding don't count, leaving you with the problem you're having now.

Again, this is a little speculative. I need to see the menu_data.js.file.

[Bozzy]

Hi, you can download it here: http://www.blueotwo.com/temp/menu/menu/menu_data.js

Thanks,
Chris

[vikenk]

Hi,

OK....I viewed you file. Try changing this...

Code: Select all

separatorcolor="#444444";
separatorsize=12;
separatorpadding=0;
separatoralign='center';
separatorimage='menu/images/bar.gif';

...to this:

Code: Select all

separatorcolor="#444444";
separatorsize=1;
separatorpadding=5;

This assumes that you don't want to use the separator image. Try it and let us know how it works.

[Bozzy]

Hi, I have updated this but still have the same problem

http://www.blueotwo.com/temp/menu/index.htm

[vikenk]

OK...

I simply added a general padding of 5px and the problem went away. Add this:

Code: Select all

separatorcolor="#444444";
separatorsize=1;
padding=5;

The 5px padding adds padding to all four sides of the menu item, so the more padding you add, the bigger your menu will appear. The configuration above solves your problem and give what I assume you want: text in the middle, all highlighted white, and not too close to the separator.

Hope this helps.

[Bozzy]

thanks for the help vik.

I hope in a future release they allow you specify the vertical padding and horizontal padding seperately.

[vikenk]

thanks for the help vik.

I hope in a future release they allow you specify the vertical padding and horizontal padding seperately.

You can do that now, in a round about way. The menu is based on tables and <td>'s. You can use css to put in padding separately (in theory) using the offclass and onclass commands. However, you'll need to remove the padding=5; for this to work.

In the menu_data file, put:

Code: Select all

offclass="menuoff"; (or whatever class name you want to use)
onclass="menuon";

In your css file, put:

Code: Select all

.menuon td {
padding-left: 5px;
padding-right: 5px;
}

.menuoff td {
padding-left: 5px;
padding-right: 5px;
}

Specifying <td> in your css file will target only the menu items (which are basically table cells) and not the menu as a whole (which is the table).

Try it if you want to experiment.

[Bozzy]

that's exactly what i was trying to do

one last thing maybe you can help with. Since adding the menuon and menuof styles, when you load the pages the links are all underlined when they should only be underlined when you rollover them.

do you know how to get rid of this?

[vikenk]

do you know how to get rid of this?

Add more CSS :>)

To your menu style, add:

.menuoff a {
text-decoration: none;
}

.menuon a {
text-decoration: underline;
}


That should do the trick.

[Bozzy]

nice one vik - thanks again