Using relative font size and normal line height

[Paul]

Do you have any guidance for using a relative font size and normal line height, so wrapped menu item text takes up less vertical space? I have a vertical-oriented menu in a fixed-width column, with as many as 30 top-level items, mostly with long text. The default style either spills the text out past the column border, or if I specify wrapping the text, the menu becomes very long because of the greater-than-normal line height.

I want to use a relative font size of 1 em, so it scales when the user changes the browser's text size. When I over-ride the css as follows, I get the font size and line height, but the images used for highlighting menu items as you move the cursor over the menu no longer line up with the text.
        .RadMenu_Default .rmLink
        {
         /*font: normal 12px/23px "Segoe UI", Arial, sans-serif;*/
         color: #000;
         line-height:normal !important;
         text-decoration: none;
        }

The other problem I have with the 23-pixel line height is that when I set the menu item text to wrap to the available space, the menu items become too tall. I would rather assign a margin between line items, and have a normal line height so the wrapped text doesn't take up so much vertical space.
        .rmLink
        {
             white-space: normal;
        }

[Paul]

I've gotten close by adding the following css while specifying skin="Default". Font size scales with the user's Text Size setting in the browser. Colors are correct.

The main remaining issue is that the graphic images used to highlight menu selections look very poor at larger text sizes. I understand that's why the menu defaults to fixed text size, but maybe you have some suggestions that would improve the display with larger text sizes?

A lesser issue is that I don't see the highlight on the top-level menu item. Any suggestions?

        .RadMenu_Default
        {
         font-size: 1em !important;
         line-height: normal !important;
        }
        .RadMenu_Default .rmLink
        {
         font-size: 1em !important;
         line-height: normal !important;
        }
        .RadMenu .rmRootGroup .rmLink {
      border-color: #ff5e55;
      border-style: solid;
      border-width: 1px;
            color: white !important;
      background-color: #444444 !important;
         font-size: 1em !important;
         line-height: normal !important;
         white-space: nowrap !important;
         overflow: hidden !important;
         padding: 0.3em 0em 0.3em 0.3em !important;
         }
        .RadMenu .rmGroup .rmLink {
            color: black !important;
            background-color: #ff998e !important;
         font-size: 1em !important;
         line-height: 2em !important;
         white-space: nowrap !important;
         padding: 0em !important;
         }

[Kamen Bundev]

Hi Paul,

Unfortunately Q1 2009 menu skins do not support item heights different than the ones set in the CSS file. This was done to prevent adding too much HTML to support the rounded corners and items with bigger heights. However, it is possible to do that with some additional javascript and a custom skin.

I'm attaching a modified Default skin with your styles already included. To have variable item hover height, you will also need this javascript:
function pageLoad() {
    var $ = $telerik.$;
   
    $('.rmLink')
        .bind( 'mouseover', function (e) {
            var parent = $(e.target).parent('.rmLink');
            var target = parent.length != 0 ? parent : $(e.target);
            if (target.hasClass('rmDisabled'))
                return;
               
            var height = target.innerHeight();
            var width = target.innerWidth();
           
            if ($telerik.isOpera || $telerik.isFirefox) {
                var leftimage = $('.rmLeftImage', target);  // Fix for Firefox 2 and Opera, where overflow: hidden; breaks the .rmGroup
                if (leftimage.length > 0 && leftimage.outerHeight() > height)
                    height = $('.rmLeftImage', target).outerHeight() + 5;
            }
           
            $('.rmHoverLink')
                .css({ left: 0, top: 0, width: width, height: height })
                .bind( 'mouseover', function (e) {
                    e.stopPropagation();
                } )
                .bind( 'mouseout', function (e) {
                    e.stopPropagation();
                    $(this)
                        .css({ left: 'auto', top: '-5000px' });
                } )
                .appendTo(this);
        } );
}

And add these elements somewhere in the body element:
<span class="rmHoverLink">
    <span class="rmHoverOut"></span>
    <span class="rmHoverMid"></span>
    <span class="rmHoverIn"></span>
    <span class="rmHoverFill"></span>
</span>

This should do it.

All the best,
Kamen Bundev
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.