Getting rid of extra padding for RadTab

Question

I don't know how strong the support of RadControls over here is, but it can't be worse than Telerik(there I'm lucky to get a response in 2-3 days), so I'm going to try here first.

Basically, I'm trying to do custom theming(using just CSS classes) throughout my application, so I tried setting the CSS classes needed on the telerik RadTab controls.

Well, when inspecting it in firebug, it adds an extra like 50 px of padding to each tab, which there seems to be no control over. This is their rendered markup

<li class="rtsLI rtsFirst">
  <a href="#" class="rtsLink ui-state-default"> <!--This is the only place where I can put in my own custom CSS class-->
    <span class="rtsOut">
      <span class="rtsIn">
        <span class="rtsTxt">
          Common Application
        </span>
      </span>
    </span>
  </a>
</li>

Now, I know you can't see the style classes, but according to Firebug, every class prefixed with "rts" has the line padding-left: 9px in the style sheet which would of course explain the extra padding problem. (Why do they need all this nesting anyway?!)

Anyway, I would like to remove that padding. How would you do this? Also, is there some way jquery could help to remove the padding?

Answer 1

If you know which setting you need to change for which classes, then the best thing to do would be to build an own style sheet with those instructions, and include it after the original stylesheet.

The important thing is to specify the classes exactly as you see them in the original style sheet, because the more specific a rule is, the more weight it has when the browser determines which settings overrule which.

This is slightly more work than doing a simple .className xyz { padding-left: 0px !important } but much, much better for maintenance. Plus, IE < 8 doesn't respect important.