Spacing between image only tabs

3 posts, 0 answers
  1. Nick
    Nick avatar
    26 posts
    Member since:
    Jan 2005

    Posted 28 Jan 2009 Link to this post

    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

     

     

  2. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 28 Jan 2009 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Nick
    Nick avatar
    26 posts
    Member since:
    Jan 2005

    Posted 29 Jan 2009 Link to this post

    Hi
    The !important works fine
    Thanks
    Nick
Back to Top