[Solved] RadMenu rounded corners

[Daniel]

Hello Community.

The first, my Problem is hard to explain in english, for my. For that reason i made a "explain Screenshot" :) I hope this will help.

I have a RadMenu with just one RadMenuItem where i have some Custom html.
I need this RadMenuItem with rounded corners.

So i tried to make 2 corner image and set it to the right location. But the RadMenu Item had somewhere a padding or a margin at the bottom. There are always about 4 pixel too much at the bottom.

For a better understanding i have this Screenshot: explain.png

Here is my code:

<style media="all" type="text/css">

        div.RadMenu .rmGroup .rmText {
            margin:-5px 0 0 0;
            padding: 0 0 0 0;
        }

        div.RadMenu_Sitefinity ul.rmRootGroup,
        div.RadMenu_Sitefinity div.rmRootGroup
        {
             background: none;
             border: 0;
        }

         div.RadMenu_Sitefinity .rmItem .rmGroup {

            background-color: rgb(28, 66, 118);
            border: 0;
        }

</style>

       <telerik:RadMenu runat="server" ID="rmSBRechnerUndTools" Visible="false" Skin="Sitefinity" OnClientItemOpened="itemOpened"
            Width="28" Height="139" Style="z-index: 105; right: 12px; position: fixed; top: 200px;" Flow="Vertical">
            <Items>
                 <telerik:RadMenuItem PostBack="false" ImageUrl="../img/slide-button.png" HoveredImageUrl="../img/slide-button-active.png">
                      <Items>
                           <telerik:RadMenuItem Width="322" Value="rmiSBRechnertools">
                                <ItemTemplate>
                                     <div>
                                        <asp:Image ID="imgSbleft" runat="server" ImageUrl="../img/sbMenuRoundLeft.png" CssClass="links" />
                                        <div class="links">
                                            <div style="clear:both;height:10px;"></div>
                                            <asp:Label ID="lbSBRechnerUTools" runat="server" Text="Verfügbare Rechner und Tools" CssClass="lhswhite"></asp:Label>
                                            <div style="clear:both;height:10px;"></div>
                                            <div style="clear:both;">
                                                <asp:ImageButton ID="ibKredit" runat="server" CssClass="links" ImageUrl="../img/sb_kr.png" onmouseover="this.src='../img/sb_kr_ov.png'" onmouseout="this.src='../img/sb_kr.png'" />
                                                <asp:ImageButton ID="ibHypo" runat="server" CssClass="links" ImageUrl="../img/sb_hr.png" onmouseover="this.src='../img/sb_hr_ov.png'" onmouseout="this.src='../img/sb_hr.png'" />
                                                <asp:ImageButton ID="ibTilgung" runat="server" CssClass="links" ImageUrl="../img/sb_ta.png" onmouseover="this.src='../img/sb_ta_ov.png'" onmouseout="this.src='../img/sb_ta.png'" />
                                                <asp:ImageButton ID="ibUnterjährig" runat="server" CssClass="links" ImageUrl="../img/sb_uvz.png" onmouseover="this.src='../img/sb_uvz_ov.png'" onmouseout="this.src='../img/sb_uvz.png'" />
                                            </div>
                                            <div style="clear:both;">
                                                <asp:ImageButton ID="ibImmobilien" runat="server" CssClass="links" ImageUrl="../img/sb_immo.png" onmouseover="this.src='../img/sb_immo_ov.png'" onmouseout="this.src='../img/sb_immo.png'" />
                                                <asp:ImageButton ID="ibKaufenMieten" runat="server" CssClass="links" ImageUrl="../img/sb_km.png" onmouseover="this.src='../img/sb_km_ov.png'" onmouseout="this.src='../img/sb_km.png'" />
                                                <asp:ImageButton ID="ibBankensuche" runat="server" CssClass="links" ImageUrl="../img/sb_ba.png" onmouseover="this.src='../img/sb_ba_ov.png'" onmouseout="this.src='../img/sb_ba.png'" />
                                                <asp:ImageButton ID="ibGrundGew" runat="server" CssClass="links" ImageUrl="../img/sb_gws.png" onmouseover="this.src='../img/sb_gws_ov.png'" onmouseout="this.src='../img/sb_gws.png'" />
                                            </div>
                                            <div style="clear:both;height:6px;"></div>
                                        </div>
                                        <asp:Image ID="imgSbRight" runat="server" ImageUrl="../img/sbMenuRoundRight.png" CssClass="links" style="right:0px;" />
                                     </div>
                                </ItemTemplate>
                           </telerik:RadMenuItem>
                      </Items>
                 </telerik:RadMenuItem>
            </Items>
       </telerik:RadMenu>
<telerik:RadScriptBlock ID="RadScriptBlock1" runat="server">
    <script type="text/javascript">
        function itemOpened(s, e) {
            if ($telerik.isIE8) {
                // Fix an IE 8 bug that causes the list bullets to disappear (standards mode only)
                $telerik.$("li", e.get_item().get_element())
                        .each(function () { this.style.cssText = this.style.cssText; });
            }
        }
    </script>
</telerik:RadScriptBlock>

I hope you understand my Problem :D
Thanks for reading.

Daniel

[Daniel]

If no one can help me, can i contact the support with that kind of problem? I do have a product serial.

Thank you,
Daniel

[Magdalena]

Hello Daniel,

To resolve better your problem with the four redundant pixels we need all the css that you applied. We attached an archived file with the pasted code. Could you please modify the file to be exactly as your code?

Regards,
Magda
the Telerik team