Border colors

Poster: mtf169
Dated: Sunday February 8 2004 - 19:41:57 GMT

Is it possible to have different color and width borders? I'm trying to create right and bottom borders of 2 pixels and top and left of 1 pixel (both with different colors). I know is this is very easy with css, but I can't see how to do it with the menu options in the javascript.

Poster: Ruth
Dated: Sunday February 8 2004 - 22:53:54 GMT

Yes. The only way I know how to do it, and there may be a better way, but you can do this. Create a style in the head of the page, or a style sheet. I'm not real up to knowledge as to calling style sheets and stuff, but this for example would work. In the head of the document you put this with the colors and sizes you want. Then in the menu in each defined style where you want the border to be that put this instead of defining the border color, size, style. For example
That would give you a border of two pixels right and bottom orange and solid, and 1 pixel left and top purplish and solid. That border could be used for all the style of menus you have or some of them. You could make each different by defining a different on/offborder for each one, just naming the class differently...borderOn borderOn1 etc. or call it whatever you want. Here's an example of the various things you can do with on/offclass. Click next on that page and watch the menu colors change. It's one menu, all of it done with on/off class. http://www.poems2u.com/index523.shtml
Ruth

Poster: mtf169
Dated: Tuesday February 10 2004 - 2:03:29 GMT

Thanks for the help! However, that puts a border around each menu and menu item. I only want a border around the outside of the drop down and not the individual links. Is there a different way to handle that, or do I have to override the borders in each menu item?

Thanks again.

Poster: Ruth
Dated: Tuesday February 10 2004 - 4:54:37 GMT

Well, the only way I can figure to do it is..... create 3 classes..say 1, 2, 3. Remember you'll have onclass and offclass for each of those you create. In 1, Using that, create 2 with the top and bottom set at 0px; then in 3 set the top 0px and the rest according to what you have for them in the others. Now you have 3 defined classes, in the head of your document. In the menu, in the style declaration for the submenus you need to make sure you don't list any padding, and list separatorsize=0;

then in each submenu where you want the border to be as you want, you'd put this..say there are 4 items



That works in the browsers I tried, Netscape, IE, Opera, Firebird..but in Netscape and Firebird for some reason when you mouseover it puts a small border a bit to the right side of the existing border. Can't figure out how to fix it, just play with that and maybe you can. Now, I'm sure there probably is an easier way...it would be easier to just be able to declare the full border-style in the item, but I've read and read the references and cannot figure out how you declare the css style when you need to declare something different as to color or size for the different sides. This is cumbersome, but at least it works. Perhaps someone else will read this and go ::pulling out hair:: it's so simple, do it like this.... Have fun. Good Luck. Hmm, one other thing that might be easier would be to get an image background for the menu which already has what you need?

EDIT: I must be out of it...if you are using the same borders and colors for on and off class for each you create, then you only need to make a class for each number 1, 2, 3, just use the same one when you put the code on the menu item. i.e. onclass=1;offclass=1; etc. duh!

Ruth