CSS setting in datagrid
-
Hi, I am using Css to control the font setting in my web application. Everything work fine except datagrid. I want to set the header of my datagrid to bold = true and font =Comic Sans MS. And i also want to set the item in the datagrid to font size 11px. But i'm not able to see the expected result although i set those setting in the properties windows. I discover the font,font weight and font size is all follow what i define in TD part in my css sheet. Can anyone help me? This is my code..... Style.css /* Default CSS Stylesheet for a new Web Application project */ BODY { BACKGROUND-COLOR: #ffffff; FONT-FAMILY: Arial; FONT-WEIGHT: normal; LETTER-SPACING: normal; TEXT-TRANSFORM: none; WORD-SPACING: normal } TH { vertical-align: baseline; font-size: 1em; font-weight: normal; word-spacing: normal; letter-spacing: normal; text-transform: none; font-family: Arial, Helvetica, sans-serif; } TD { font-size: 12px; font-weight: normal; word-spacing: normal; letter-spacing: normal; text-transform: none; font-family: Arial, Helvetica, sans-serif; } A:link { text-decoration: none; color: #3333cc; } A:visited { text-decoration: none; color: #333399; } A:active { text-decoration: none; color: #333399; } A:hover { text-decoration: underline; color: #3333cc; } SMALL { font-size: .7em; } BIG { font-size: 1.17em; } BLOCKQUOTE, PRE { font-family: Courier New, monospace; } p { font-family: Arial, Helvetica, sans-serif; font:12px; font-weight:normal } Webform4.aspx <%@ Page Language="vb" AutoEventWireup="false" Codebehind="WebForm4.aspx.vb" Inherits="TryWeb.WebForm4"%> WebForm4
-
Hi, I am using Css to control the font setting in my web application. Everything work fine except datagrid. I want to set the header of my datagrid to bold = true and font =Comic Sans MS. And i also want to set the item in the datagrid to font size 11px. But i'm not able to see the expected result although i set those setting in the properties windows. I discover the font,font weight and font size is all follow what i define in TD part in my css sheet. Can anyone help me? This is my code..... Style.css /* Default CSS Stylesheet for a new Web Application project */ BODY { BACKGROUND-COLOR: #ffffff; FONT-FAMILY: Arial; FONT-WEIGHT: normal; LETTER-SPACING: normal; TEXT-TRANSFORM: none; WORD-SPACING: normal } TH { vertical-align: baseline; font-size: 1em; font-weight: normal; word-spacing: normal; letter-spacing: normal; text-transform: none; font-family: Arial, Helvetica, sans-serif; } TD { font-size: 12px; font-weight: normal; word-spacing: normal; letter-spacing: normal; text-transform: none; font-family: Arial, Helvetica, sans-serif; } A:link { text-decoration: none; color: #3333cc; } A:visited { text-decoration: none; color: #333399; } A:active { text-decoration: none; color: #333399; } A:hover { text-decoration: underline; color: #3333cc; } SMALL { font-size: .7em; } BIG { font-size: 1.17em; } BLOCKQUOTE, PRE { font-family: Courier New, monospace; } p { font-family: Arial, Helvetica, sans-serif; font:12px; font-weight:normal } Webform4.aspx <%@ Page Language="vb" AutoEventWireup="false" Codebehind="WebForm4.aspx.vb" Inherits="TryWeb.WebForm4"%> WebForm4
Due to a flaw in the DataGrid control provided by Microsoft, it does not generate code compliant to the W3C standard. What this means for you and I is that table header's created by the DataGrid control will not render with <th/> tags. This flaw is documented on DataGrid Girl's website[^] and a fix has been posted to Microsoft support site[^]. Microsoft has not publicly released the fix, but provides a link to contact them for information. In the meantime... By renaming your TH style to "GridHeader" and adding the following line between your column tags, you will be able to impact the look of the header cells.
<asp:boundcolumn, asp:templatecolumn, asp:ect...
<HeaderStyle CssClass="GridHeader"/>
</asp:boundcolumn, asp:templatecolumn, asp:ect...Unfortunately, this will not impact row level design elements.
-
Due to a flaw in the DataGrid control provided by Microsoft, it does not generate code compliant to the W3C standard. What this means for you and I is that table header's created by the DataGrid control will not render with <th/> tags. This flaw is documented on DataGrid Girl's website[^] and a fix has been posted to Microsoft support site[^]. Microsoft has not publicly released the fix, but provides a link to contact them for information. In the meantime... By renaming your TH style to "GridHeader" and adding the following line between your column tags, you will be able to impact the look of the header cells.
<asp:boundcolumn, asp:templatecolumn, asp:ect...
<HeaderStyle CssClass="GridHeader"/>
</asp:boundcolumn, asp:templatecolumn, asp:ect...Unfortunately, this will not impact row level design elements.
I follow the way u said,but i still can't get the output i wanted. This is the code i wrote, is that anything wrong in my code? /* Default CSS Stylesheet for a new Web Application project */ BODY { BACKGROUND-COLOR: #ffffff; FONT-FAMILY: Arial; FONT-WEIGHT: normal; LETTER-SPACING: normal; TEXT-TRANSFORM: none; WORD-SPACING: normal } GridHeader { vertical-align: baseline; font-size: 1em; font-weight: bold; font-family: Arial, Helvetica, sans-serif; } TD { font-size: 12px; font-weight: normal; word-spacing: normal; letter-spacing: normal; text-transform: none; font-family: Arial, Helvetica, sans-serif; } A:link { text-decoration: none; color: #3333cc; } A:visited { text-decoration: none; color: #333399; } A:active { text-decoration: none; color: #333399; } A:hover { text-decoration: underline; color: #3333cc; } SMALL { font-size: .7em; } BIG { font-size: 1.17em; } BLOCKQUOTE, PRE { font-family: Courier New, monospace; } p { font-family: Arial, Helvetica, sans-serif; font:12px; font-weight:normal } Datagrid code:
-
I follow the way u said,but i still can't get the output i wanted. This is the code i wrote, is that anything wrong in my code? /* Default CSS Stylesheet for a new Web Application project */ BODY { BACKGROUND-COLOR: #ffffff; FONT-FAMILY: Arial; FONT-WEIGHT: normal; LETTER-SPACING: normal; TEXT-TRANSFORM: none; WORD-SPACING: normal } GridHeader { vertical-align: baseline; font-size: 1em; font-weight: bold; font-family: Arial, Helvetica, sans-serif; } TD { font-size: 12px; font-weight: normal; word-spacing: normal; letter-spacing: normal; text-transform: none; font-family: Arial, Helvetica, sans-serif; } A:link { text-decoration: none; color: #3333cc; } A:visited { text-decoration: none; color: #333399; } A:active { text-decoration: none; color: #333399; } A:hover { text-decoration: underline; color: #3333cc; } SMALL { font-size: .7em; } BIG { font-size: 1.17em; } BLOCKQUOTE, PRE { font-family: Courier New, monospace; } p { font-family: Arial, Helvetica, sans-serif; font:12px; font-weight:normal } Datagrid code:
Check the markup for your .CSS or Style section. The problem rests in your style sheet. Roughly stated, styles are defined based on three types: Tag, ID and Class. In your example;
<style>
...GridHeader {
vertical-align: baseline;
font-size: 1em;
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
}TD {
font-size: 12px;
font-weight: normal;
word-spacing: normal;
letter-spacing: normal;
text-transform: none;
font-family: Arial, Helvetica, sans-serif;
}
</style>you have defined [GridHeader] as a tag, which it is not. GridHeader should be defined as a class. Here is the corrected sytax.
.GridHeader {
vertical-align: baseline;
font-size: 1em;
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
}Note the classname is prefaced with a period (.). The period defines the scope of the style and allows the style to be applied to any number of elements on the page. This quick change should take care of the problems you are facing. UPDATE: Your markup for the style within the Datagrid does not change. You will still reference the style by its name only, without the period modifier.
<headerStyle CssClass="GridHeader"/>
-
Check the markup for your .CSS or Style section. The problem rests in your style sheet. Roughly stated, styles are defined based on three types: Tag, ID and Class. In your example;
<style>
...GridHeader {
vertical-align: baseline;
font-size: 1em;
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
}TD {
font-size: 12px;
font-weight: normal;
word-spacing: normal;
letter-spacing: normal;
text-transform: none;
font-family: Arial, Helvetica, sans-serif;
}
</style>you have defined [GridHeader] as a tag, which it is not. GridHeader should be defined as a class. Here is the corrected sytax.
.GridHeader {
vertical-align: baseline;
font-size: 1em;
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
}Note the classname is prefaced with a period (.). The period defines the scope of the style and allows the style to be applied to any number of elements on the page. This quick change should take care of the problems you are facing. UPDATE: Your markup for the style within the Datagrid does not change. You will still reference the style by its name only, without the period modifier.
<headerStyle CssClass="GridHeader"/>