[Solved] Root Image Borders

[Mike]

Hello,

I've made a menu with a single root item that is just a small icon. I want it so that when people hover over the icon, they see the menu. The problem is that the skins put a border on the icon that I can't seem to get rid of... The border seems to be coming from the <ul> tag with the class rmRootGroup. I tried putting a reference to it in my own css file, but that didn't seem to work.

Any idea how I can get rid of that border on the top, but otherwise keep the rest of the skin working?

So, in short, I want the root item (the item with just the image) to basically have no border, while the child items keep the normal skin.

Thanks,

Mike

<telerik:RadMenu runat="server" ID="mnuSMS" BorderWidth="0px" onitemclick="mnuSMS_ItemClick">
    <Items>
        <telerik:RadMenuItem ImageUrl="../images/sms.png" BorderWidth="0px">

            <Items>
                <telerik:RadMenuItem Text="Thing 1"></telerik:RadMenuItem>
                <telerik:RadMenuItem Text="Thing 2"></telerik:RadMenuItem>
            </Items>
        </telerik:RadMenuItem>
    </Items>
</telerik:RadMenu>

[Cori]

Hello Mike,

The border issue, I'm assuming, is more related to the fact that the image is enclosed inside of an a element. Trying setting BorderStyle="None" as well with BorderWidth="0". If that doesn help, create a css class that removes the border on the img tag and add it to the menu item. Like so:

.removeBorder img
{
   border: none 0;
}

<telerik:RadMenuItem ImageUrl="../image.jpg" CssClass="removeBorder">

I hope that helps.

[Mike]

Thanks for the idea...

Unfortunately - no luck there... I've played around with doing that kind of thing elsewhere, but that doesn't hit the right level.

Here's the example output code from the making a skin help page... That kind of thing (or doing "outercssclass") impacts the <a> or <li> tags - but the border here is coming from the <ul> tag. I can't seem to find a way to set a css class for the <ul> tag.

<div id="RadMenu1"  class="RadMenu RadMenu_Green ">
 <ul class="rmHorizontal rmRootGroup">
   <li class="rmItem rmFirst">
     <a href="#" class="rmLink ">
       <span class="rmText">File</span>
     </a>
     <div class="rmSlide">

Thanks,

Mike

[Yana]

Hi Mike,
 
You are right - the border is set to the <ul> element. You can set CssClass property to the whole menu:

<telerik:RadMenu runat="server" ID="mnuSMS"  CssClass="noBorderMenu">

and add the following css:

div.noBorderMenu .rmRootGroup {
   border: none;
}

or you can set directly the style to "RadMenu" css class - in this way it will affect all the menus on the page:

div.RadMenu .rmRootGroup {
    border: none;
}

Kind regards,
Yana
the Telerik team