How remove space between endcap graphics and toolbar graphics

[Kevin]

We have a graphic toolbar and are adding endcap graphics to each end to make things look better.

However I can't seem to remove the extra space that exists between the endcap graphic and the first/last toolbar graphic.

I had already added the following css to make sure all the toolbar graphics themselves were up against each other:

    <style type="text/css">
       .RadToolBar .rtbIcon,
       .RadToolBar .rtbIn,
       .RadToolBar .rtbMid  {
            padding: 0 !important;
        }

        .RadToolBar .rtbItem {
            margin: 0 !important;
        }
    </style>

But that doesn't seem to affect edges.  Is there a margin on the left and right side of the toolbar itself I need to also tweak via css?

Here's a snippet of the html that is the left endcap graphic and the toolbar itself:

                        <div id="primaryNavigation">
                            <img src="/images/primarynav/pn-bgLeft.png" alt="" border="0" height="41" width="12" />
                            <telerik:RadToolBar ID="RadToolBar1" runat="server" OnButtonClick="ToolBar1_ButtonClick" Skin="">
                                <CollapseAnimation Type="OutQuint" Duration="200"></CollapseAnimation>
                                <Items>
...

Thx!

[Yana]

Hello Kevin,

For the first graphic you should also set its css float property to "left" like this:

<img src="/images/primarynav/pn-bgLeft.png" alt="" border="0" height="41" width="12" style=" float:left" />

and for the last graphic  "float: left" should be set to RadToolBar main div:

.RadToolBar {
   float:left !important;
 }

Best regards,
Yana
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.