borders on submenu, rawcss - RESOLVED

[davebarnes]

I have a redesigned website ( http://www.attunesystems.com/ ) with a borders problem on my sub-menus.

My current code is:

Code: Select all

with(Sub1MenuStyle=new mm_style()){
...
bordercolor="#b2b2b2";
borderstyle="solid";
borderwidth="1";
padding="5px 15px 4px 10px";
...}

which creates a gray border on all 4 sides.

The graphic artist's design calls for different borders on each side.
I tried replacing the border and padding parameters with:

Code: Select all

//rawcss="padding:5px 15px 4px 10px; border-right:solid 1px #7c7c7c; border-bottom:solid 1px #7c7c7c; border-left:solid 1px #b2b2b2;";

but it did not work.

So, obviously I don't understand how to use rawcss.

Any help would be appreciated.
thanks,
dave

[John]

Hi Dave,

No idea if this makes a difference, but when I write shortcut CSS my border items are in a slightly different order than yours...

Code: Select all

rawcss="padding:5px 15px 4px 10px; border-right:1px solid #7c7c7c; border-bottom:1px solid #7c7c7c; border-left:1px solid #b2b2b2;";

[davebarnes]

John,

The borders now appear, but are incorrect.
The borders are on EACH menu item and not the entire menu.
Take a look at
Now what?

[John]

Dave,

I've asked Andy to take a look as my CSS isn't fully up to snuff.

[Andy]

rawcss won't work because it's for the menu item link and not the menu item container.

You can, however use offclass and declare all your value in there.

So, create some CSS rules like this:

Code: Select all

.menuoffclass
{
border-top:0;
border-left:1px solid red;
border-bottom:1px solid yellow;
border-right:1px solid blue;
}

and then declare the classname in your menu_data.js file (in the menus style) like this:

Code: Select all

offclass="menuoffclass"

HTH,
Andy

[davebarnes]

Andy,

An extremely helpful answer.

My pages contain:

Code: Select all

<link href="/Styles/Attune_BaseStyle.css" type="text/css" rel="stylesheet">

and

Code: Select all

<script language="JavaScript" src="/javascript/Milonic/milonic_src.js" type="text/javascript"></script>
<script language="JavaScript" src="/javascript/Milonic/mmenudom.js" type="text/javascript"></script>
<script language="JavaScript" src="/javascript/Milonic/MainMenu_data.js" type="text/javascript"></script>

My MainMenu_data.js file contains:

Code: Select all

offclass="menuoffclass";
onclass="menuonclass";

and many attributes such as borderstyle are no longer needed.

My Attune_BaseStyle.css file contains:

Code: Select all

/* Classes applicable to the Milonic Menu */

.menuoffclass {background-color: white; color: #004479; border-top:0px;border-right:1px solid #7c7c7c; border-bottom:1px solid #7c7c7c; border-left:1px solid #b2b2b2; text-decoration: none;}
.menuonclass {background-color: #CCCCCC; color: #812479; border-top:0px;border-right:1px solid #7c7c7c; border-bottom:1px solid #7c7c7c; border-left:1px solid #b2b2b2; text-decoration: none;}

and my menu appears the way the graphic artist intended.

,dave