Skins and Stylesheet noob question

Question

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:

.FixedFont
    {
    font-family:Courier; 
    }

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,

.DefaultWidth
    {
    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..

.Button
{
    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.

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.