Develop Reference

Setting #Font-Face From C# Code Behind

In my stylesheet I have this declared
#font-face {
font-family: 'light';
src: url('Fonts/HelveticaNeueLTStd-Lt.otf') format('opentype');
}
Now in my C# code behind I try to set the class like this
row.CssClass = light;
But I get a compile error of
The name 'light' does not exist in the current context
Is it possible to reference a css class #font-face from C# codebehind?
EDIT
This is how I am attempting to use this - I have tried the below
.lightfontface {
font-family: 'light';
}
#font-face {
font-family: 'light';
src: url('Fonts/HelveticaNeueLTStd-Lt.otf') format('opentype');
}
row.CssClass = lightfontface;

I believe your
row.CssClass = light;
needs to be
row.CssClass = "className";
and your css will need a .className entry.
Imagine your html row:
<tr class="className">stuff</tr>
Your CssClass assignment is assigning the value to class, and your css can use a class selector to format that row.
To sum up some of the comments, the style sheet entry should simply be:
.className { font-family: 'light'; }
Ordering on your style sheet is important. Put the font-face definition above the .className style entry. See: https://www.w3.org/TR/CSS2/cascade.html#cascading-order

How can I get text in an HTML tr (table row) to center?

I'm building some HTML in a StringBuilder like so:
builder.Append("<tr align='center' valign='top' class=\"skyBlueBackground textAlignCenter\">");
List<String> columnHeadings = GetColumnHeadings(monthCount, _begindate);
foreach (String s in columnHeadings)
{
if (s.Equals("Grand Total"))
{
builder.Append("<td align='left' valign='top' class=\"forestGreenBackground whiteText\"><b>");
}
else
{
builder.Append("<td align='left' valign='top'><b>");
}
builder.Append(s);
builder.Append("</b></td>");
}
builder.Append("</tr>");
Although I've got a class for centering text:
builder.Append("</style>");
. . .
builder.Append(".textAlignCenter { text-align: center; }");
builder.Append("</style>");
...the text is aligned left; it works other than that (skyblue background), it just stays magnetized to the left:
What must I do to get the text to center?

You should either set the textAlignCenter on the TD, not the TR or change the CSS definition to:
builder.Append(".textAlignCenter td { text-align: center; }");
And you should remove the explicit "align='left'" from your TD because that will still overrule the CSS.

If you are asking for how to vertically align the text, you could use the vertical-align CSS property. See here for more info.
You could also use the valign attribute, but it is deprecated in HTML5 and it is not a recommended approach.

Your problem is simply, you have created correctly the css class property .textAlignCenter, but your attribute align="left" on the <td> has style priority.
I think you can do two solutions:
Put the class .textAlignCenter on the td you want to align
center.
Remove the align="center" of the td and add a css like
this:
tr td {text-align:left}
tr td.textAlignCenter {text-align:center}
With this last solution you overwrite the last style.

asp.net programatically created table and css priority

I have a table which I create programatically in my code behind file and set the colours of alternate row to gray for easier visibility like so:
<New cells and rows created here>
tblResults.GridLines = GridLines.Both;
tblResults.BorderStyle = BorderStyle.Solid;
tblResults.HorizontalAlign = HorizontalAlign.Center;
if (rowNumber % 2 == 1)
{
tblRow.BackColor = System.Drawing.Color.LightGray;
}
tblResults.Rows.Add(tblRow);
tblResults.CssClass = "myclass" ;
pnlContent.Controls.Add(tblResults);
I also want to have the rows highlighted when a user hovers over them like so:
.myclass tr:hover
{
background: #FCF;
}
Now the hover only seems to work for the rows which are not highlighted gray from the c# code which I assumes takes precedence over the css.
How can I also make those gray rows work with the css hover?

Try this hope it helps, I think some where the Style inside the page is overwriting your light Grey Background. Try this it will be ease to find the solution
if (rowNumber % 2 == 1)
{
tblRow.Attributes.Add("Class","ClassName_grey");
}
else{
tblRow.Attributes.Add("Class","ClassName_nothing")
}
.myclass tr:hover
{
background: #FCF;
}
.ClassName_grey {
background: #eeeeee;
}

You might try
.myclass tr:hover
{
background-color: #FCF;
}
Or adding the !important qualifier. The former is basically setting the same style as the server-side code should be, whereas your code was setting the less specific background (all aspects of it, not just colour).
Otherwise try viewing the source or using developer tools to see what style attribute you need to overwrite.

Is it possible to set height and width of image which was assigned to a label dynamically

Hi all i am using the code below to append image to a label text
lblPopUp.Text = "<img src='Popup(Images)/notfound.png' /> Access Denied,Contact Administrator";
This results me as follow when loaded
Is it possible to change some what as below so that text and image should look similar

A little string manipulation should accomplish what you want, if I understand you correctly.
Code:
lblPopup.Text = "<img src='Popup(Images)/notfound.png' /> Access Denied,Contact Administrator";
String strInsertStyle = " style=\"height: 100px; width: 100px;\"";
int intInsertPoint = lblPopup.Text.IndexOf("<img") + 4;
lblPopup.Text = lblPopup.Text.Substring(0, intInsertPoint) + strInsertStyle + lblPopup.Text.Substring(intInsertPoint);
Edit:
I am also assuming you mean you want to add the height/width later, otherwise go with jadarnel27's answer.

You can set the height and width with the height and width attributes of the <img> tag:
lblPopUp.Text = "<img src='Popup(Images)/notfound.png' height='50px' width='50px' /> Access Denied,Contact Administrator";
Alternately, you could use the style attribute:
lblPopUp.Text = "<img src='Popup(Images)/notfound.png' style='height:50px; width:50px;' /> Access Denied,Contact Administrator";
One more thing: I would strongly reccomend against using all those &nbsps to get your alignment right. Putting some padding-right on your <img> tag will be much easier and much more stable.

Increasing the width of the autocomplete extender list

I have an ASP.NET AJAX autocomplete extender with CompletionListCssClass=autocomplete_completionListElement :
.autocomplete_completionListElement
{
width:500px;
margin : 0px!important;
background-color : inherit;
color : windowtext;
border : buttonshadow;
border-width : 1px;
border-style : solid;
overflow :auto;
height : 200px;
text-align : left;
}
But for some odd reason the width of the auto complete list always takes up the width of the textbox even when I set the width to 500px. Is there a way to fix this?

I believe you can also accomplish this by changing
width:500px;
to
width:500px!important;
Tim Mackey expounds more in this blog post. Basically you have to use !important to override the CSS spit out by the control itself.

I finally figured it out. I used the OnClientPopulated="onListPopulated" property as follows:
function onListPopulated() {
var completionList = $find("AutoCompleteEx").get_completionList();
completionList.style.width = 'auto';
}

You need to set the min-width to 500px