Spacing between image only tabs

[Nicholas]

Hi

I am using RadTabStrip with only images on the tabs no text like this.

 

<telerik:RadTabStrip ID="RadTabStrip1" runat="server" Skin="" MultiPageID="RadMultiPage1" Width="470" Height="25" >

 

<Tabs>

 

<telerik:RadTab PageViewID="LatestNewsPageView"

 

ImageUrl="Handlers/GetMainTabImage.ashx?text=Latest News&tabImage=Normal"

 

SelectedImageUrl="Handlers/GetMainTabImage.ashx?text=Latest News&tabImage=Selected"

 

HoveredImageUrl="Handlers/GetMainTabImage.ashx?text=Latest News&tabImage=Hover" CssClass="Tabs">

 

</telerik:RadTab>

 

<telerik:RadTab PageViewID="BenifitsPageView"

 

ImageUrl="Handlers/GetMainTabImage.ashx?text=Benifits&tabImage=Normal"

 

SelectedImageUrl="Handlers/GetMainTabImage.ashx?text=Benifits&tabImage=Selected"

 

HoveredImageUrl="Handlers/GetMainTabImage.ashx?text=Benifits&tabImage=Hover" CssClass="Tabs">

 

</telerik:RadTab>

 

<telerik:RadTab PageViewID="VIPEventsPageView"

 

 

 

ImageUrl="Handlers/GetMainTabImage.ashx?text=VIP Events&tabImage=Normal"

 

SelectedImageUrl="Handlers/GetMainTabImage.ashx?text=VIP Events&tabImage=Selected"

 

HoveredImageUrl="Handlers/GetMainTabImage.ashx?text=VIP Events&tabImage=Hover" CssClass="Tabs">

 

</telerik:RadTab>

 

</Tabs>

 

</telerik:RadTabStrip>

What I want to do is have a spacing of 4 pixels between each tab, so I have the following CSS

 

.Tabs

 

 

{

 

 

    margin-right: 4px;

}

 

 

 

But this doesn't work.

What do I need to do to get the spacing between the tabs

Thanks

Nick

 

 

[Princy]

Hello Nick,

Try adding the !important keyword to the code as shown below:
css:

<style type="text/css">
    .Tabs
    {
      margin-right: 4px !Important;
    }
 </style>

The !important keyword  is used so that the corresponding appearance setting will dominate over the style specified in the Styles.css file of the chosen skin.

Another option is to add a Seperator Tab to the tab collection of the RadTabStrip as shown below:

<telerik:RadTabStrip ID="RadTabStrip1" runat="server" Skin="" MultiPageID="RadMultiPage1" Width="470" Height="25" >
     <Tabs>
     <telerik:RadTab PageViewID="LatestNewsPageView" ImageUrl="image1" SelectedImageUrl="image1" HoveredImageUrl="image1" CssClass="Tabs">
     </telerik:RadTab>
     <telerik:RadTab IsSeparator="true" Width="4px"></telerik:RadTab>
     <telerik:RadTab PageViewID="BenifitsPageView" ImageUrl="image2" SelectedImageUrl="image2" HoveredImageUrl="image2" CssClass="Tabs">
     </telerik:RadTab>
      <telerik:RadTab IsSeparator="true" Width="4px"></telerik:RadTab>
     <telerik:RadTab PageViewID="VIPEventsPageView" ImageUrl="image3" SelectedImageUrl="image3" HoveredImageUrl="image3" CssClass="Tabs">
     </telerik:RadTab>
     </Tabs>
     </telerik:RadTabStrip>

Thanks
Princy.

[Nicholas]

Hi
The !important works fine
Thanks
Nick