Board Logo

menu link
wms103006 - 12/11/2006 at 07:08 AM

I'm using the free version to test with and noticed that I'm having a drop in the menu color when I make one of the top level options as a link. My problem is when I mouse over the top menu level a pixel drop occurs. How do I correct this?

Here is my code:

menu_items.js
var MENU_ITEMS = [
['User Menu', null, null,
['Submit New Problem', '../user/new.asp'],
['View Problem List', '../user/view.asp'],
['Edit Information', '../user/register.asp?edit=1'],
],
['Admin', '../admin/'],
['Log Off', '../logoff.asp'],
];


menu_tpl.js
var MENU_POS = [{

'height': 21,
'width': 166,

'block_top': 156,
'block_left': 33,

'top': 0,
'left': 131,

'hide_delay': 200,
'expd_delay': 200,
'css' : {
'outer' : ['m0l0oout', 'm0l0oover'],
'inner' : ['m0l0iout', 'm0l0iover']
}
},{
'height': 21,
'width': 170,
'block_top': 22,
'block_left': 0,
'top': 23,
'left': 0,
'css' : {
'outer' : ['m0l1oout', 'm0l1oover'],
'inner' : ['m0l1iout', 'm0l1iover']
}
},{
'block_top': 5,
'block_left': 160
}
]


wms103006 - 12/11/2006 at 07:41 AM

i did modify the css as follows:

menu.css
/* level 0 inner */
.m0l0iout {
font-family: Arial;
font-size: 12px;
text-decoration: none;
margin: 4px 0 0 8px;
color: #046F5B;
}
.m0l0iover {
font-family: Arial;
font-size: 12px;
text-decoration: underline;
margin: 5px 0 0 8px;
color: #046F5B;
}

/* level 0 outer */
.m0l0oout {
text-decoration : none;
border: 1px solid #0CFE0B4;
background-color: #CFE0B4;
}
.m0l0oover {
text-decoration : none;
background-color: #CFE0B4;
border: 1px solid #CFE0B4;
}

/* level 1 inner */
.m0l1iout {
font-family: Arial;
font-size: 12px;
margin: 4px 0 0 17px;
color: #046F5B;
}
.m0l1iover {
font-family: Arial;
font-size: 12px;
margin: 4px 0 0 17px;
color: #046F5B;
}

/* level 1 outer */
.m0l1oout {
text-decoration : none;
background-color: #CFE0B4;
border: 1px solid #CFE0B4;
padding: 0;
}
.m0l1oover {
text-decoration: underline;
color: #046F5B;
background-color: #CFE0B4;
background-repeat: no-repeat;
border: 1px solid #CFE0B4;
padding: 0;
}


tigra - 12/11/2006 at 08:26 PM

The text moves down 1 pixel when you hover the root level because you specified different margins for the normal and mouseover states in the CSS file:

Code:
.m0l0iout {
font-family: Arial;
font-size: 12px;
text-decoration: none;
margin: 4px 0 0 8px; /* <-- 4 pixels top margin in normal state */
color: #046F5B;
}
.m0l0iover {
font-family: Arial;
font-size: 12px;
text-decoration: underline;
margin: 5px 0 0 8px; /* <-- 5 pixels top margin in hover state */
color: #046F5B;
}


Softcomplex: http://www.softcomplex.com/
Back to forum: http://www.softcomplex.com/forum/