CODEWITHSUNDEEP
asp.netcssstyles
Jafar Kofahi
Jafar Kofahi

Reputation: 763

Control style overridden

I have the following ASP.Net code 

...
<div style="width: 40%; float: left; margin-left: 15px">
    <b>County:</b>
    <asp:ComboBox ID="cboCounty" runat="server" MaxLength="0" 
    AutoCompleteMode="SuggestAppend" CssClass="EPSCombo">
    </asp:ComboBox>
    <br />
...

The problem: This div contains many combobox's and they are not showing as expected, they all have EPSCombo class. and when I debug the CSS I find that it is being overridden, here is the output from FireBug

enter image description here

My EPSCombo style is as follows (overriding the default AjaxToolkit CSS)

.EPSCombo .ajax__combobox_inputcontainer .ajax__combobox_textboxcontainer input
{
    margin: 0;
    border: solid 1px #7F9DB9;
    border-right: 0px none;
    padding: 1px 0px 0px 5px;
    font-size: 13px;
    height: 18px;
}
.EPSCombo .ajax__combobox_inputcontainer .ajax__combobox_buttoncontainer button
{
    margin: 0;
    padding: 0;
    background-image: url(../images/windows-arrow.gif);
    background-position: top left;
    border: 0px none;
    height: 21px;
    width: 21px;
}
.EPSCombo .ajax__combobox_itemlist
{
    border-color: #7F9DB9;
}

And the CSS file containing EPSCombo is the last one included in the Master page.

Question: It might had been a while since I did web development, but if I decide the CSS class for a control shouldnt that have the highest priority and should override everything else, correct? If so, then why is my combobox style (Height, Width, margin, and padding) is being overridden?? I dont have any other style class that set the height and width for those values shown in Firebug.

Update after Loki's answer I thought I should add this, adding !important to these attributes would solve the problem, but I want to get to the root cause of this and see where things went wrong.

Upvotes: 0

Views: 1833

Answers (2)

Eric
Eric

Reputation: 170

Your ComboBox may be inheriting it's styling from the <div> it is contained in, or from a div higher than that. Since you have not specified a 'class' or 'ID' attribute for the div that it is contained within, that div may be retrieving style from your CSS file if you have something like:

div
{
  height: 21px;
  margin: 0px;
  padding: 0px;
  width: 21px;
}

To force your ComboBox to take independent styling though you may use the asp style attribute like so:

<asp:ComboBox ID="cboCounty" runat="server" MaxLength="0" 
AutoCompleteMode="SuggestAppend" style="margin: 0;padding: 0;height: 21px;width: 21px;">
</asp:ComboBox>

That should be the highest priority over any other styling that may be interfering in your application. Although considered improper programming practice it may help you narrow down the issue.

Cheers, Eric

EDIT I should also mention that your CSS code is interpreted in order from the most specific to least specific tag definitions. Ex, div.menu is more specific than div, this may be occurring somewhere else in your style-sheet.

This is also a good article to look at describing inheritance. Hope this helps!

Upvotes: 3

Anton Matyulkov
Anton Matyulkov

Reputation: 722

A quick fix - add !important flags to your stylesheet. They'll have higher priority over everything else, unless there are other flags defining the very same property of the very same element

Upvotes: 1

Related Questions