Formatting ASP.NET controls with CSS

[nevets2001uk]

I am trying to create a CSS style sheet which includes formatting for my ASP.NET controls on each page. I've been able to format the basic elements of the controls but with one control in particular I am having problems.

I'm trying to modify the TabStrip controls appearance on one page. I can change the basic style but am unsure how to change the styles of the individual tabs.

In the code I can format them using the following...

<ie:TabStrip
TargetID = &quot;mpgPages&quot;
Style=&quot;width:400px;font:Arial&quot;
TabDefaultStyle=&quot;width:50px;border:solid 1px blue&quot;
/>

How for example do I control the TabDefaultStyle settings on a CSS document? I've tried things like...

.tabstrip {
width : 400px;
TabDefaultStyle-width : 50px;
}

But it doesn't work. Can anyone point me in the right direction. I assume it must be possible!




Steve Gordon

http://www.celebrity-hunt.co.uk

 

[BillyRayPreachersSon]

I don't know about .NET stuff that much, but would this work: Give the tabstrip an ID, and then using that in the CSS, instead of using the class?

Something like:

<ie:TabStrip
   id = &quot;myTabStrip&quot;
   TargetID = &quot;mpgPages&quot;
   Style=&quot;width:400px;font:Arial&quot;
   TabDefaultStyle=&quot;width:50px;border:solid 1px blue&quot;
/>

#myTabStrip {
          width : 400px;
          TabDefaultStyle-width : 50px;
          }

I don't know if you can assign the id property like that or not... Then again, I don't even know if that is client-side or server-side code I'm looking at ;o)

Maybe the ASP.NET forum (forum855) would be a better bet?


Hope this helps!

Dan

 

[nevets2001uk]

Hi,

I'm still having problems with this. Thanks for the advice so far but it doesn't seem to work for me. I assume that this must be possible? Maybe someone knows how to control the css for another complex asp control which may push me in the right direction? I keep searching on google but with no luck!!



Steve Gordon

http://www.celebrity-hunt.co.uk

 

[blueark]

Many asp.net controls have a 'CssClass' property for this. For example, <asp:MyControl id=&quot;mycontrol&quot; CssClass=&quot;myClass&quot; runat=&quot;server&quot; />

I don't know if TabStrip has this though, but it might be worth a try. Many complex controls can't use this property because they are a collection of several controls, so it's difficult to know which part is being referred to. TabDefaultStyle-width, for example, is not an real element when the page is generated.

Dan's advice should work, provided you look at the source code of the generated page, and relate the styles to those elements rather than the TabStrip abstractions.

 

[nevets2001uk]

The cssClass seems to work but only for the basic appearance of the control and not for the extra parts such as TabDefaultStyle. Here is the code generated for the control when the page is viewed...

<TSNS:TabStrip id=&quot;TabStrip&quot; DefaultStyle=&quot;tab;&quot; selectedIndex=&quot;0&quot; targetID=&quot;mpgPages&quot; tabDefaultStyle=&quot;width:90px;padding:3px;height:20px;border:solid 1px #C9C9C9;background:#C9C9C9;&quot; tabHoverStyle=&quot;background:#E6E6E6;&quot; tabSelectedStyle=&quot;color:#26559B;background:#E6EBED;border-bottom:none;&quot; sepDefaultStyle=&quot;width:10px;border-bottom:solid 1px #C9C9C9;&quot; onSelectedIndexChange=&quot;JScript:document._ctl0.__TabStrip_State__.value=event.index&quot; onwcready=&quot;JScript:try{document._ctl0.__TabStrip_State__.value=selectedIndex}catch(e){}&quot;>

Steve Gordon

http://www.celebrity-hunt.co.uk

 

[seni0rl0c0]

Hey Steve,

I am in the same situation trying to apply a style class from a CSS document to the different events for the IWEC tab Strip control. Have you found a solution for this problem?

Thanks,
Matt

 

[BillyRayPreachersSon]

I can only suggest trying one of the ASP.Net forums.

Sorry!

Dan

 

[nevets2001uk]

Not got anywhere yet I'm afraid. Still looking but put it on the backburner until I get other parts working.

If worst comes to worst I think I'm going to have to change the appearance in the code at runtime by replacing the control with a label and inserting the correctly styled control during the page load event.

Steve Gordon

http://www.celebrity-hunt.co.uk