Take the 2-minute tour ×

I have a Skin File that contains:

< asp:TextBox runat="server" CssClass="FixedFont"/>

In the same folder as the Skin file, is the following css file. The Css file contains:


Lastly, I have an ASPX page which contains the following control:

<asp:TextBox ID="TextBox1" runat="server">Test</asp:TextBox>

When I view the ASPX page in design mode or run the page, I see that the font-family attribute on the style does effect the textbox control, namely, it is changed to Courier.

However, what I would also like to do is to define a local style on my ASPX page,

    width: 300px;

...and have all of my TextBoxes so that they are the same width.

If I set the CssClass property of TextBox1 to "DefaultWidth"...

<asp:textbox ID="TextBox1" CssClass="DefaultWidth">Hello</asp:TextBox>

...the width of the textbox is changed to 300px but I lose the effect of the skin appling the fix font Courier style.

To get BOTH effects to be applied, the DefaultWidth and the fixed font textbox effect, I have to set the CSSClass property to "DefaultWidth FixedFont", which to me, seems like it defeats the advantage of having the skin in the first place. I guess I expected the effect to be CUMULATIVE, unless I added a style that conflicted with the SKIN, in which case, I expected the local class to be applied over the skin's effect. For example, If I applied a second class, Class2, that also included a font-family specification in addition to other effects, I would expect the font specified in Class2 to override that in the FixedFont style. But that doesn't appear to be what is going on here.

What is the best way to manage such a situation? I imagine very often wanting to have a series of textboxes that all match in width, so I imagine that I will very often want to specify a CssClass on a control in addition to using the effects applied to the control in type in the skin file.

Is the solution NOT to use CSS in the SKIN itself? This seem like it has disadvantages, too, on the side of maintenance.

A secondary problem that I am having is that if I declare a stylesheet with the following class..

    background-image: url('/images/button.gif')

...and set the CSSClass property of an ASP Button to "Button", I see the image tiled over the button.

However, if I enter the following code in the skin file

it does not find the image.

The images folder is a first-levl folder off of the root of the website.

Any idea why it is not picking up the image. I;'ve tried various other paths, but that is the only one that seems to make sense to me.

By the way, the image is applied in design mode, but it disappears when ity is run.

share|improve this question

1 Answer 1

I don't know if I understood your question but as I'm seeing from here, what you should have to declare this in your "local" style:

textbox.fixedfont { width:200px; }

or simply to every textbox if you are sure about affecting every textbox with the same width, doesn't matter the skin...

textbox { width:200px; }

If this not what you were asking for, please be clearer.

share|improve this answer
I think that you might have missed some key points due to the fact that the code I entered was not formatted properly and was hidden. Perhaps try reading it again. I also added a secondary question. Thanks –  ChadD Aug 27 '09 at 4:50
Ok, this is kinda greek to me because I'm not a programmer, but I'm a designer so I could help a little if I figure out some things. The second question, not sure, but is necessary to use the / before the directory images?? Normaly the declaration for an image which is in the images directory one level down the root should be background-image: URL('images/image.jpg'); Moreover, if you want to stop the tiling, you should use background-image: URL('images/image.jpg'); background-position: center center; /* could be X px and Y px / background-repeat: no-repeat; / or tile hor or vert */ –  Billeeb Aug 27 '09 at 5:32
I think I get it but not sure again, hahaha. Let's see. can't you use textbox { xxx} in your page? That would affect every textbox. If that's the case then you should try doing a new class for both, the font and the textbox width, something like FxFont-TBWidth { font-family: courier; width: 200px; so you do CssClass="FxFont-TBWidth". Another solution should be using the ids. But that would be crazy (you should do #textbox1, #textbox2, #textbox3, etc. { width: 200px }, but I don't realize why can't you use textbox {xxx} to affect a textbox... –  Billeeb Aug 27 '09 at 5:41

Your Answer


