CSS styles not working with ASP.NET control

I have a webpage using ASP.NET that contains Textboxes and Dropdown Menu items.  I want the page to have a uniform look so I want all of the textboxes to be the same width and all of the dropdown menus to be the same width.  If I add the WIDTH attribute to the control and set the value everything works fine.

I want to be able to control the widths from one place so I created CSS class styles in my CSS style sheet where I set the width.  I then apply the CSS Class style to the control.  When I display the page, my controls do not size according to the width set in the Style Sheet.  Can someone please tell me what I am doing wrong?

Style Sheet Include in Header
========================
<link rel="Stylesheet" type="text/css" href="CSS/EMPStyles.css" />

EMPStyles.css
======================
.TextBoxFormat
{
    width: 150px;
}

TextBox Control Definition on Web Page
================================
<asp:TextBox ID="txtFirstName" runat="server"  CausesValidation="True" CssClass="TextBoxFormat"></asp:TextBox>
dyaroshAsked:
Who is Participating?
 
Johny BravoConnect With a Mentor Commented:
If you wish to apply css to all the textboxes in your webpage,

you should add below css(of course change attributes it as per your liking)

input[type=text] {
  border: 5px solid white;
    -webkit-box-shadow:
      inset 0 0 8px  rgba(0,0,0,0.1),
            0 0 16px rgba(0,0,0,0.1);
    -moz-box-shadow:
      inset 0 0 8px  rgba(0,0,0,0.1),
            0 0 16px rgba(0,0,0,0.1);
    box-shadow:
      inset 0 0 8px  rgba(0,0,0,0.1),
            0 0 16px rgba(0,0,0,0.1);
    padding: 15px;
    background: rgba(255,255,255,0.5);
    margin: 0 0 10px 0;
}

First try to put this in the head tag of the page where you want to apply the css.
<style type="text/css">
input[type=text] {
----
}
</style>


If this works then try putting this in your external css file
0
 
dyaroshAuthor Commented:
Here is the HTML rendered code

HTML Rendered Code
==================
<input name="ctl00$ctl00$dynamiccontainer$onebox$txtFirstName" type="text" id="dynamiccontainer_onebox_txtFirstName" class="TextBoxFormat" />
0
 
GaryCommented:
Got a live link?
0
Cloud Class® Course: Amazon Web Services - Basic

Are you thinking about creating an Amazon Web Services account for your business? Not sure where to start? In this course you’ll get an overview of the history of AWS and take a tour of their user interface.

 
dyaroshAuthor Commented:
No
0
 
GaryConnect With a Mentor Commented:
You must have some other css overriding it or the stylesheet is not actually being included.
Try changing your style to this
.TextBoxFormat
{
    width: 150px !important;
}

Open in new window


If that works then it is being overridden by another class further along in the css file.
0
 
dejaanbuCommented:
you can easily trace your css issues with Developer tools .

i suggest mozilla's . right click on the textbox and choose "inspect element". you should be able to see the CSS rules applied to that textbox.

BTW, don't forget to clear your browser's cache.
0
 
dyaroshAuthor Commented:
Thank you.  I ended up using both solutions.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.