Question about formating

[Gita]

Hello,

Please have a look at this site . Hier .the borders move once the font becomes bold on Rollover. Is there a was to avoid this shaking borders? Specially here it looks terrible.I have playes for a long time with CSS commands, but without any result. Would be greatful for any hint.

Thanks

[Schlurk]

To me it seems like this is occurring because the width of each item is increasing each time you hover over it (font goes bold) and decreases each time you leave the item (font goes back to normal). Have you set specific widths for each item? I believe if this is the case then you will not have an issue with the items expanding due to the bold font.

[Gita]

You are right. But any how I am very confused and can not find the command that may help. Here is the css and I would be thankfull for any sugessions.

.RadMenu .rmRootGroup
{
 

 background: #fff ;
 height:23px;
}

.RadMenu .rmItem
{
 background: transparent ;
 margin-left: 0px;
}

.RadMenu .rmLink,
.RadMenu .rmTemplate
{
 color: #0055a0;
 font: 11px/14px Arial,sans-serif;
 text-decoration: none;
/*letter-spacing: 1px;*/

 

}

.RadMenu .rmLink,
.RadMenu .rmTemplate
{
 padding: 4px 18px 5px;
border: solid #828282;
 border-width: 0  1px 0 0;
 

}

.RadMenu .rmHorizontal .rmLink
{
 background: transparent;
}

.RadMenu .rmLast .rmLink,
.RadMenu .rmRootGroup .rmLast .rmDisabled,
.RadMenu .rmRootGroup .rmLast .rmDisabled:hover
{
 background: none;
}

.RadMenu .rmExpanded
{
 position: relative;
 z-index: 10000;
}

.RadMenu .rmGroup .rmText
{
 padding: 0 40px 0 0;
}

.RadMenu .rmLeftImage .rmText
{
 padding-left: 18px;

}

.RadMenu_rtl .rmLeftImage
{
 padding-right: 20px;
}

.RadMenu .rmLink:hover,
.RadMenu .rmItem .rmExpanded
{
 background: #fff;
}

.RadMenu .rmHorizontal .rmLink:hover,
.RadMenu .rmHorizontal .rmExpanded

{
 
 padding: 4px 17px 5px;
 color: #666;
 font-weight: bold;
 
}

.RadMenu .rmHorizontal .rmFocused
{
 
 padding: 4px 17px 5px;
 font-weight: bold;
}

.RadMenu .rmHorizontal .rmFirst .rmLink:hover,
.RadMenu .rmHorizontal .rmFirst .rmExpanded,
.RadMenu .rmHorizontal .rmFirst .rmFocused
{
 border-left: 0;
 padding-left: 18px;
}

.RadMenu .rmHorizontal .rmLast .rmLink:hover,
.RadMenu .rmHorizontal .rmLast .rmExpanded,
.RadMenu .rmHorizontal .rmLast .rmFocused
{
 border-right: 0;
 padding-right: 18px;

}

.RadMenu .rmVertical.rmRootGroup .rmLink
{
 border-bottom: 1px solid #898989;
 padding-bottom: 4px;
}

.RadMenu .rmVertical.rmRootGroup .rmLink:hover,
.RadMenu .rmVertical.rmRootGroup .rmExpanded,
.RadMenu .rmVertical.rmRootGroup .rmFocused
{
 border-top: 0;
 padding-top: 4px;
}

.RadMenu .rmVertical.rmRootGroup .rmGroup .rmLink
{
 border-bottom: 0;
 padding-bottom: 5px;
}

.RadMenu .rmVertical .rmLast .rmLink
{
 border-bottom: 0;
 padding-bottom: 5px;
}

.RadMenu .rmVertical .rmLink:hover,
.RadMenu .rmVertical .rmExpanded
{
 border: solid #828282;
 border-width: 1px 0;
 padding: 3px 18px 4px 18px;
}

.RadMenu .rmVertical .rmFirst .rmLink:hover,
.RadMenu .rmVertical .rmFirst .rmExpanded,
.RadMenu .rmVertical .rmFirst .rmFocused
{
 border-top: 0;
 padding-top: 4px;
}

.RadMenu .rmVertical .rmLast .rmLink:hover,
.RadMenu .rmVertical .rmLast .rmExpanded,
.RadMenu .rmVertical .rmLast .rmFocused
{
 border-bottom: 0;
 padding-bottom: 5px;
}

.RadMenu .rmRootGroup .rmDisabled,
.RadMenu .rmRootGroup .rmDisabled:hover
{
 border: 0;
 padding: 4px 18px 5px;
 color: #999;
 background: transparent;
}

.RadMenu .rmHorizontal .rmDisabled,
.RadMenu .rmHorizontal .rmDisabled:hover
{
 background: transparent url('MenuBgRight.gif') repeat-y 100% 0;
}

.RadMenu .rmRootGroup .rmItem .rmGroup .rmItem .rmDisabled,
.RadMenu .rmRootGroup .rmItem .rmGroup .rmItem .rmDisabled:hover
{
 border: 0;
 padding: 4px 18px 5px;
 color: #999;
 background: transparent;
}

.RadMenu_rtl .rmRootGroup .rmItem .rmGroup .rmItem .rmDisabled,
.RadMenu_rtl .rmRootGroup .rmItem .rmGroup .rmItem .rmDisabled:hover
{
 padding: 4px 0 5px 18px;
}

.RadMenu .rmVertical.rmRootGroup .rmItem .rmDisabled,
.RadMenu .rmVertical.rmRootGroup .rmItem .rmDisabled:hover
{
 border-bottom: 1px solid #898989;
 padding-bottom: 4px;
}

.RadMenu .rmVertical.rmRootGroup .rmLast .rmDisabled,
.RadMenu .rmVertical.rmRootGroup .rmLast .rmDisabled:hover
{
 border-bottom: 0;
 padding-bottom: 5px;
}

.RadMenu .rmRootGroup .rmDisabled .rmLeftImage,
.RadMenu .rmRootGroup .rmDisabled .rmRightImage
{
 filter: alpha(opacity=50);
 -moz-opacity: .5;
 opacity: .5;
}

.RadMenu .rmGroup
{
 background: #fff;
 border: 1px solid #828282;
}

.RadMenu .rmGroup .rmExpandRight
{
 background: transparent url('ExpandArrows.gif') no-repeat 100% -4px;
}

.RadMenu .rmGroup .rmLink,
.RadMenu .rmGroup .rmLink:hover
{
 padding-right: 1px;
}

.RadMenu .rmGroup .rmLink:hover .rmExpandRight,
.RadMenu .rmGroup .rmExpanded .rmExpandRight
{
 background-position: 100% -29px;
}

.RadMenu .rmVertical.rmGroup .rmLink:hover,
.RadMenu .rmVertical.rmGroup .rmExpanded,
.RadMenu .rmVertical.rmGroup .rmFocused,
.RadMenu .rmFirst .rmVertical.rmGroup .rmLink:hover,
.RadMenu .rmFirst .rmVertical.rmGroup .rmExpanded,
.RadMenu .rmFirst .rmVertical.rmGroup .rmFocused
{
 background: #dfdfdf;
 color: #6b6b6b;
 border: solid #a5a5a5;
 border-width: 1px 0;
 padding: 3px 1px 4px 18px;
}

.RadMenu .rmGroup .rmItem,
.RadMenu .rmGroup .rmLink
{
 background: transparent;
}

.RadMenu .rmHorizontal .rmSlide
{
 margin: -1px 0 0 0;
}

.RadMenu .rmHorizontal .rmFirst .rmSlide,
.RadMenu .rmHorizontal .rmFirst .rmVertical .rmSlide
{
 margin: -1px 0 0 -1px;
}

.RadMenu .rmVertical .rmSlide
{
 margin: -1px 0 0 -1px;
}

.RadMenu .rmTopArrowDisabled,
.RadMenu .rmBottomArrowDisabled,
.RadMenu .rmLeftArrowDisabled,
.RadMenu .rmRightArrowDisabled
{
 display: none;
}

.RadMenu .rmTopArrow,
.RadMenu .rmBottomArrow,
.RadMenu .rmLeftArrow,
.RadMenu .rmRightArrow
{
 font-size: 0;
 color: #fff;
 line-height: 0;
}

.RadMenu .rmTopArrow,
.RadMenu .rmBottomArrow
{
 height: 10px;
 width: 100%;
 background: #fff url('ScrollArrowUpDown.gif') no-repeat top center;
}

.RadMenu .rmBottomArrow
{
 background-position: center -18px;
}

.RadMenu .rmLeftArrow,
.RadMenu .rmRightArrow
{
 width: 10px;
 height: 100%;
 background: #fff url('ScrollArrowLeftRight.gif') no-repeat left center;
}

.RadMenu_Context .rmGroup
{
 background: #fff url('ContextMenuBg.gif') repeat-y 0 0;
}

div.RadMenu_Context ul.rmGroup
{
 padding: 2px 0;
}

.RadMenu_Context .rmGroup .rmItem .rmLink
{
 padding-left: 5px;
 padding-right: 1px;
 border-width: 0;
 margin: 0 2px;
}

.RadMenu_Context .rmGroup .rmItem .rmLink:hover,
.RadMenu_Context .rmGroup .rmItem .rmExpanded,
.RadMenu_Context .rmGroup .rmItem .rmFocused,
.RadMenu_Context .rmFirst .rmGroup .rmItem .rmLink:hover,
.RadMenu_Context .rmFirst .rmGroup .rmItem .rmExpanded,
.RadMenu_Context .rmFirst .rmGroup .rmItem .rmFocused
{
 border-width: 1px;
 padding-left: 4px;
 padding-right: 0;
 margin: 0 2px;
}

.RadMenu_Context .rmGroup .rmItem .rmDisabled,
.RadMenu_Context .rmGroup .rmItem .rmDisabled:hover,
.RadMenu_Context .rmFirst .rmGroup .rmItem .rmDisabled,
.RadMenu_Context .rmFirst .rmGroup .rmItem .rmDisabled:hover
{
 color: #999;
 background: transparent;
 padding: 3px 1px 4px 5px;
 border-width: 0;
 margin: 0 2px;
}

.RadMenu_Context .rmGroup .rmItem .rmText
{
 padding-left: 30px;
}

.RadMenu .rmRightArrow
{
 background-position: -18px center;
}

.RadMenu .rmHorizontal .rmSeparator,
.RadMenu .rmGroup .rmHorizontal .rmSeparator
{
 background: #666;
 width: 1px;
 height: 24px;
}

.RadMenu .rmVertical .rmSeparator,
.RadMenu .rmGroup .rmVertical .rmSeparator
{
 background: #666;
 width: auto;
 height: 1px;
}

[Schlurk]

Since I'm not completely sure what you are looking for I could suggest that you try out the Visual Style Builder to create your skin and see if you can form the skin to your liking.

[Gita]

Thank you very much for your great help and advice Schruk :-)