I am having a problem in that a style is not being applied when I used an "ID" selector (#btnOK). However, if I use a class selector (.btnOK, by changing the "#btnOK" to a ".btnOK" in the CSS file), the style is applied.
Any idea why? The style IS also applied in design mode, but not at run time. It's findingf the css file, else, the class wouldn't be applied. Case sensitivity match on the ID.
In the web page:
<link href="CSS/CvCost.css" rel="stylesheet" type="text/css" />
<asp:Button ID="btnOK" CssClass="btnOK" runat="server" Text="OK" ValidationGroup="Add"/>
In CSS/CvCost.css:
#btnOK{
margin-right:5px;
margin-top:5px;
float:right;
width:75px;
height: 25px;
}
ASP.Net will automatically generate unique IDs based on the element's container.
You need to use ASP.Net's actual ClientID.
Since you can't do that in an external CSS file, you should just use a class selector.
If you're using ASP.Net 4, you can also set the new ClientIDMode property to Static.
If I recall correctly the ID that will show up when the code is ran/debugged wouldn't be the same as #btnOK. VS will give it another ID to go by when the code is ran.
Related
I have a Sharepoint 2010 intranet and I am designing the current template with my own css file. I have added my custom css file to the style library and have added this piece of code in a masterpage at the end in my tag:
<SharePoint:CssRegistration name="<% $SPUrl:~SiteCollection/Style Library/custom/custom.css%>" runat="server"/>
Now I always need to add the !important tag in my css classess which are also used in the default sharepoint css file. I dont want to have to do that every time. Is there some solution where I can override my own custom css over the default sharepoint css file?
After your page is rendered by SharePoint in the browser, view the source. It is likely that your CSS page is listed before out of the box style sheets like corev4.css.
To rearrange this ordering try:
<SharePoint:CssRegistration
name="<% $SPUrl:~SiteCollection/Style Library/custom/custom.css%>"
after="corev4.css"
runat="server"/>
For more information on the After property, see:
CssRegistration.After Property
SharePoint CSSRegistration or Link?
What is new with the CssRegistration control in SharePoint 2010
This sounds like a CSS specificity problem. This article has lots of helpful explanations of the subject.
If you have written the same rule into your external style sheet
twice, than the lower rule in your style sheet is closer to the
element to be styled, it is deemed to be more specific and therefore
will be applied.
e.g. In the following case, the padding would be set as 10px, not 5px.
#content h1 {
padding: 5px;
}
#content h1 {
padding: 10px;
}
To fix your current problem, either as Dipaks suggested add your css directly in the page (as this would take preference over external css files), or even better, and more simply, just add the reference to your css file after the reference to the Sharepoint css, in which case, if they have equal specificity, your css would be applied.
I've noticed when trying to apply the 'style' attribute to an asp:TextBox control, for example or when attempting to use a css class to apply a style, it doesn't take. I have to specifically set the attribute. For instance:
<asp:TextBox runat="server" ID="DescriptionTextBox" BackColor="#F7FCFF" /> // Works
<asp:TextBox runat="server" ID="DescriptionTextBox" CssClass="textbox" /> // Doesn't work
<style type="text/css">
.textbox
{
background-color: #F7FCFF;
}
</style>
I know this is a simple question, but can someone kindly shed some light on it for me?
Thank you
Don't get too confused over what an asp control actually is. In fact all it does is generate HTML, which is what the CSS is then applied to.
Your second example with CssClass should work, but instead of debugging by looking at your aspx you really need to check out the HTML (using your browsers version of the developer tools such as Firebug will show you what styles are being applied).
The text box control probably generates either style attribute with background colour or uses more specific CSS rule.
Check the html generated and use FireBug to see which CSS rules are applied / overridden.
Everything looks to be correct. Make sure that you are linking your style sheet between your head tags, or if you opt to go the route of inline tags, those also need to be in between the head.
<html>
<head>
<link href="StyleSheet.css" type="text/css" rel="stylesheet" />
</head>
<body>....
OR
<html>
<head>
<style type="text/css">
.textbox
{
background-color: #F7FCFF;
}
</style>
</head>....
Remember that there isn't an actual TextBox control in HTML so unless it gives you the property (like asp.net does) you must have that CssClass that you used. Also, if you are using the format in your example as is to compare that is where your problem is. See my second code block for where the style should be.
Hope that helps
Tony
You could also do something like DescriptionTextBox.style.add("background-color", "#fff") in your code behind.
I hope this isn't too difficult, obviously you can call HTML tags such as fieldset, label and legends and also textboxes. However how does one call an asp:textbox, i have tried just textbox, asp:textbox, input.textbox but nothing seems to work. This is something that should be really straight forward to do and I can't waste any more time figuring it out.
Thanks.
You can try input[type=text] but that will not work in IE6. Or you can create a class like .asp-textbox and set the CSSClass property of the textbox to asp-textbox which will work across browsers.
Example:
<asp:TextBox ID="TextBox1" runat="server" CssClass="asp-textbox"></asp:TextBox>
/*CSS*/
.asp-textbox{background-color:red;}
Understand that all of the ASP processing is done on the server, before anything gets to the user. When the user's browser is applying stylesheets, it doesn't see any of your ASP code — all it has is the HTML that's been generated by your ASP code.
So what you're trying to find out is what HTML is generated by the textbox tag. The answer is: it depends on the way the textbox is defined. If the TextMode attribute is set to "multiline", then it's rendered in HTML as a textarea element. If it's set to "password", then it's rendered as an input element of type "password". Otherwise, it's an input element of type "text".
Your best bet is probably to assign a class to your textboxes and reference that in your stylesheet.
it's an input (of type text)
it renders as <input type="text" />
The only cross browser way is to add a class to the textbox using CSSClass property and style that using the class. Also you can use the id selector. When using the id selector check for naming container also.
.test { }
<asp:textbox id="txt1" CssClass="test" runat="server" />
Try the following:
.myclass td.col1 input
{
background-color: #D1FFC1;
}
This should work in IE also.
If I've understood you correctly, change the word "call" to "select", it's what CSS does (selects and element for styling). Use the property CssClass on the asp:Text in order to make it easily available to your CSS. Example:
.myClass { color: red; }
I have a simple website with a master-page. To set properties to elements on a content page (such as Textbox) I use CSS. In designer it works well but when I launch a site a style isn't apllied to controls. The reason is simple. To say, I have a TextBox with id="TextBox1" in content page, it is placed in ContentPlaceHolder1. In CSS file I set properties for object with id #TextBox1. When I launch a site due to master page name mangling it gets an id like ctl00_ContentPlaceHolder1_TextBox1 which is not defined in CSS file included in masterpage.
What is a correct solution of this problem? Hardcoding mangled name doesn't seem to be good.
Use CssClass on the controls, like this: CssClass="myClass", then in your stylesheet instead of this:
#TextBox1 { /* styles */ }
You'd have this:
.myClass { /* styles */ }
It's worth noting that .Net 4 fixes, or allows you to better manage the ID generated in the html, see here for details.
As Nick and SLaks have both said classes are best. You can assign multiple classes in the class property and it will aggregate all the properties from all the classes specified overwrite any of the properties that it shares with earlier classes. The order of the classes definition in the css file sets the order that they get applied.
<style type="text/css">
.genericTextBox
{
background-color: #eee;
color: black;
}
.textbox1
{
background-color: #3ee;
font-size: larger;
}
</style>
<asp:TextBox id="textBox1" CssClass="textbox1 genericTextBox" runat="server"></asp:TextBox>
The order the styles get applied is first genericTextBox, because its the first defined in the style (essentially the order in class gets ignored). It sets the color and the background-color, then the style textbox1 gets applied and it overwrites the background-color and adds font-size to. So in the end you end with the color from generictextbox, the background-color and font-size from textbox1.
EDIT: on the TextBox changed class to CssClass
The simplest solution is to apply your CSS rules using classnames (Which don't get mangled) instead of IDs.
The correct solution is to use the ClientID property, which returns the mangled ID.
For example:
.Something #<%=TextBox1.ClientID %>` {
color: red;
}
However, you can only do that for inline stylesheets.
I’ve noticed that on aspx page IntelliSense doesn’t display the Style property of a web control, even thought the control does have a Style property. Does that mean we shouldn’t declaratively set the Style property:
<asp:TextBox ID="UserName" Style="color:Green; padding:0px; margin:0px;" runat="server"></asp:TextBox>
Style translates to the client-side style property; it's actually a CssStyleCollection collection of styles. It doesn't display the style property directly, but once you type style=" it should start showing you the CSS styles that are available to you.
If you have to set these styles in the same file as your html then it's much better to use an embedded style that targets the ID of your control. The best solution, however, is to reference an external stylesheet (css) that contains your styles.
For example:
<style type="text/css">
#UserName {color:Green; padding:0px; margin:0px;}
</style>