Question about formating

5 posts, 1 answers
  1. Gita
    Gita avatar
    10 posts
    Member since:
    Nov 2008

    Posted 17 Jan 2010 Link to this post

    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
  2. Schlurk
    Schlurk avatar
    812 posts
    Member since:
    May 2009

    Posted 18 Jan 2010 Link to this post

    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.
  3. Gita
    Gita avatar
    10 posts
    Member since:
    Nov 2008

    Posted 26 Jan 2010 Link to this post

    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;
    }

  4. Answer
    Schlurk
    Schlurk avatar
    812 posts
    Member since:
    May 2009

    Posted 26 Jan 2010 Link to this post

    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.
  5. Gita
    Gita avatar
    10 posts
    Member since:
    Nov 2008

    Posted 27 Jan 2010 Link to this post

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