GridView Lines Not Showing up in IE - asp.net

I am developing an asp page and the GridView GridLines are not showing up in IE but it is showing up on Firefox and Chrome. Is there something specific that needs to be done for the IE side.
This is my css file for GridView:
/* grid table */
table.gridview {
border-collapse: collapse;
margin: 0px !important;
border: #6593cf 1px solid;
}
.gridview td {
font-size: 11px;
font-family: Arial;
color: #000000;
cursor: default;
text-align: left;
}
.gridview th {
font-size: 11px;
font-family: Arial;
color: #484848;
cursor: default;
text-align: left;
}
table.gridview a {
color: #000000;
text-decoration: none;
}
table.gridview a:hover {
text-decoration: underline;
}
/* header row */
tr.gridview_hdr {
background-color: #deecff;
}
.gridview_hdr th {
color: black;
font-weight: normal;
text-align: left;
border-top: solid 1px #6593cf;
border-bottom: solid 1px #6593cf;
border-left: solid 1px #6593cf;
border-right: solid 1px #6593cf;
padding-left: 5px;
padding-right: 5px;
padding-top: 2px;
padding-bottom: 2px;
}
.gridview_hdr th a {
color: #000000;
text-decoration: none;
font-weight: bold;
}
.gridview_hdr th a:hover {
color: #000000;
text-decoration: underline;
}
/* item row */
tr.gridview_itm {
background-color: #ffffff;
}
.gridview_itm td {
padding: 2px 5px;
border-right: #ffffff 0px solid;
border-top: #ffffff 1px solid;
border-left: #ffffff 0px solid;
border-bottom: #add1ff 1px solid;
}
.gridview_itm td a {
text-decoration: underline;
}
/* alternating item row */
tr.gridview_aitm {
background-color: #ffffff;
}
.gridview_aitm td {
padding: 2px 5px;
border-right: #ffffff 0px solid;
border-top: #ffffff 1px solid;
border-left: #ffffff 0px solid;
border-bottom: #add1ff 1px solid;
}
.gridview_aitm td a {
text-decoration: underline;
}
/* pager row */
tr.gridview_pgr {
width: 100%;
font-family: verdana;
font-weight: bold;
font-size: 11pt;
color: #ff9900;
}
.gridview_pgr td {
background-image: url(/Monitor/App_Themes/Sugar2006/images/bg.gif);
background-repeat: repeat-x;
height: 23px;
padding: 0px;
font-size: 10px;
font-family: Arial;
}
.gridview_pgr_ddl {
font-size: 10px;
font-family: Arial;
}
.gridview_pgr A {
font-family: verdana;
font-size: 9pt;
text-decoration: none;
color: #0000ff;
}
and this is my aspx page:
<asp:GridView
ID="GridView1"
runat="server"
CssClass="gridview"
RowStyle-CssClass="gridview_itm"
AlternatingRowStyle-CssClass="gridview_aitm"
HeaderStyle-CssClass="gridview_hdr"
PagerStyle-CssClass="gridview_pgr"
AutoGenerateColumns="False"
AllowPaging="True" PageSize="50" Width="100%" AllowSorting="True"
onsorting="GridView1_Sorting" onrowdatabound="gridView1_RowDataBound"
onpageindexchanging="GridView1_PageIndexChanging">
Also I do have GridLines = "Both" on the GridView properties.
What am I doing wrong?
Thanks for your help.

With the GridView, the declarative bordercolor attribute adds an inline style declaration which only applies to the table itself, not individual cells.
Adding the bordercolor attribute programmatically does not use an inline style, but uses the HTML bordercolor property, which browsers apply to ALL borders inside the table.
protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
{
foreach (TableCell tc in e.Row.Cells)
{
tc.Attributes["style"] = "border-color: #c3cecc";
};
}

Related

How to make css not repeat same class?

.class-action:hover, .class-action.activeOne {
color: black;
font-weight: bold;
}
.class-action.activeOne {
margin: 3px 0px;
border-bottom: 2px solid black;
}
is there a way to stack these css code? I dont want to repeat same class again. I want all four style for ".class-action.activeOne" and only above 2 style when ".class-action:hover"
other option is below, but it repeats the css
.class-action:hover {
color: black;
font-weight: bold;
}
.class-action.activeOne {
color: black;
font-weight: bold;
margin: 3px 0px;
border-bottom: 2px solid black;
}
Simply nest your selectors:
.class-action {
&:hover,
&.activeOne {
color: black;
font-weight: bold;
}
&.activeOne {
margin: 3px 0px;
border-bottom: 2px solid black;
}
}

styling CellTable Row depending on it's value

I need to change the color of the row in CellTble depending on its value, I'm setting the style by (cellTable.css) file using Interface CellTable.Style .
I tried the code :
AttendanceTable.setRowStyles(new RowStyles<AttendanceRecord>(){
#Override
public String getStyleNames(AttendanceRecord row, int rowIndex) {
if(row.getName().equals("-"))
return"blueText";
else
return"normalText";
}
});
and both (blueText , normalText)are defined in my project.css file but it don't see them.
any suggestions? ... thanks in advance.
my cellTable.css file is as follow:
/**
* table styles
*/
.cellTableCell {
border:0px;
border-right: 1px solid #FFFFFF;
border-bottom: 1px solid #FFFFFF;
height: 37px;
color:#7f7f7f;
font-size: 12px;
font-family: sans-serif;
padding-left: 10px;
}
.cellTableHeader {
color: #FFFFFF;
border:0px;
border-right: 1px solid #FFFFFF;
border-bottom: 5px solid #FFFFFF;
background-color: #6AA0BF;
text-align: center;
font-size:11px;
text-shadow: none;
overflow: hidden;
height: 50px;
font-family: sans-serif;
}
.cellTableEvenRow {
background: #C8CED6;
text-align: center;
}
.cellTableOddRow {
background: #DFE7F2;
text-align: center;
}
.cellTableHoveredRow {
background: #D0D8E8 ;
text-align: center;
}
.cellTableSelectedRow {
background: #ea9706;
text-align: center;
}
.cellTableSelectedRowCell {
color: white ;
}

How to Change Selected tab color using ajax in asp.net?

I used a Master Page and on separate page, I used ajax tab control but unable to change selected tab color..
Thanx in Advance
You can use this css.
.MyTabStyle .ajax__tab_header
{
font-family: "Helvetica Neue" , Arial, Sans-Serif;
font-size: 14px;
font-weight: bold;
display: block;
margin-left:20px;
z-index:-1000;
}
.MyTabStyle .ajax__tab_header .ajax__tab_outer
{
border-color: #222;
color: #222;
padding-left: 10px; /*margin-right: 3px;*/
border: solid 1px #999;
border-bottom-color: #d7d7d7;
-webkit-margin-before: 1em;
-webkit-margin-after: -1px;
-webkit-margin-start: 0px;
-webkit-margin-end: -1px;
}
.MyTabStyle .ajax__tab_header .ajax__tab_inner
{
border-color: #666;
color: #000;
padding: 0px 5px 0px 5px;
}
.MyTabStyle .ajax__tab_hover .ajax__tab_outer
{
border-color: #BBB; /*color #1*/
background: white;
color: Black;
}
.MyTabStyle .ajax__tab_hover .ajax__tab_inner
{
color: Black;
cursor: pointer;
}
.MyTabStyle .ajax__tab_outer
{
padding: 0 16px; /* edit 16px for different tab width */
display: inline-block;
font: normal 12px Verdana;
line-height: 25px; /* height #1 */
text-decoration: none;
color: #333;
border: 1px solid #999; /*This color can be different from color #2 */
border-bottom: none;
background: #F6F6F9;
outline: none;
border-radius: 5px 5px 0 0;
position: relative;
margin: 0 -1px -1px 0;
text-align: -webkit-match-parent;
}
.MyTabStyle .ajax__tab_active .ajax__tab_outer
{
color: white;
font-weight: bold;
border-color: #BBB; /*color #1*/
background: #0099CC; /*color #2*/
/*z-index: 3;*/
padding: 1px 10px 0px 10px;
border-bottom-width: 0px;
}
.MyTabStyle .ajax__tab_active .ajax__tab_inner
{
color: white;
border-color: #333;
padding: 0px 10px 0px 10px;
}
.MyTabStyle .ajax__tab_body
{
font-family: verdana,tahoma,helvetica;
font-size: 10pt;
/*background-color: #fff;*/ /*border-top-width: 0;*/
border: solid 1px #d7d7d7; /*border-top-color: #ffffff;*/
padding: 10px 10px;
border-radius: 4px;
box-shadow: 0 0 8px #CCC;
background-color: white;
}
HTML
<asp:TabContainer ID="TabContainer1" runat="server" ActiveTabIndex="0" Width="100%"
CssClass="MyTabStyle" OnClientActiveTabChanged="SaveActiveTabIndex">
<asp:TabPanel HeaderText="Personal Details" runat="server" ID="TabPanel1">
<ContentTemplate>
</ContentTemplate>
</asp:TabPanel>
</asp:TabContainer>
I know it's an old question, but if anyone will need this, a working answer is:
.MyTabStyle .ajax__tab_tab /*inactive tab*/
{
outline: 0;
}
.MyTabStyle .ajax__tab_active .ajax__tab_tab /*active tab*/
{
color: #d13f31;
outline: 0;
}

Is it possible to have the menu link color change on the table hover for an asp.net menu control?

I'm using an ASP.net menu and when i hover inside my menu item's table, i change the background color on the table column, but unless i hover over the link text itself, the link text color will not change.
Is it possible to have the link text color changed on the table hover?
Example below shows what happens.
Excuse the ugly CSS:
.TopStaticSelectedStyle
{
cursor: pointer;
font-size: 11px;
font-family: Verdana;
}
.TopStaticMenuStyle a,
.TopStaticMenuStyle a:visited,
.TopStaticMenuStyle a:active
{
color: #ffffff;
text-decoration: none;
font-weight: bold;
font-family: Verdana;
}
.TopStaticMenuStyle a:hover
{
color: #000000;
text-decoration: none;
font-size: 11px;
font-weight: bold;
font-family: Verdana;
}
.TopStaticMenuItemStyle td
{
padding: 0px 12px 0px 12px;
text-align: center;
background-color: #6c85b0;
height: 18px;
border-top: solid 1px #012754;
border-bottom: solid 1px #012754;
border-left: solid 1px #012754;
border-collapse:collapse;
}
.TopStaticHoverStyle
{
font-weight: normal;
font-family: Verdana;
}
.TopStaticHoverStyle td
{
padding: 0px 12px 0px 12px;
text-align: center;
background-color: #ffffff;
height: 18px;
border-top: solid 1px #012754;
border-bottom: solid 1px #012754;
border-left: solid 1px #012754;
border-collapse:collapse;
color: #000000;
}
I scrapped your css and just started from scratch but you should be able to get the idea from this.
So some basic table html:
<table>
<tr>
<td>
Test
</td>
<td>
Test 2
</td>
</tr>
</table>​
And then the css:
a {
color:#000;
}
td {
border:solid 1px black;
background:#234567;
padding:5px 10px;
}
td:hover {
background:#eee;
}
td:hover a {
color:#ccc;
}
td a:hover {
color:#777;
}
​
The key here is the td:hover a selector which is what you need to change the color on hover of the td.

How do I apply Devexpress themes to a basic html table?

I'm using Devexpress's MVC exctensions within my MVC3 w/razor project. I have data grids using Devexpress's MVC extensions and also basic html tables without any styling.
Is there a way to apply the devexpress styles to my html tables for a consistent look?
You can use css to style a grid then follow the same principle for a table. Here is a style for a grid I created then styles for a similar looking table
/************************GRID STYLE************************************/
.mGrid
{
width: 100%;
background-color: #fff;
margin: 5px 0 5px 0;
border: solid 1px #525252;
border-collapse: collapse;
font-size: 13px; /*width: 820px;*/
text-align: center;
}
.mGrid td
{
padding: 2px;
border: solid 1px #c1c1c1;
color: #717171;
height: 20px;
}
.mGrid th
{
padding: 4px 2px;
color: #fff;
background: #424242 url(images/grd_head.png) repeat-x top;
border-left: solid 1px #525252;
height: 20px; /*font-size: 15px; */
}
.mGrid .alt
{
background: #fcfcfc url(images/grd_alt.png) repeat-x top;
}
.mGrid .pgr
{
background: #424242 url(images/grd_pgr.png) repeat-x top;
text-align: left;
}
.mGrid .pgr table
{
margin: 5px 0;
}
.mGrid .pgr td
{
border-width: 0;
padding: 0 6px;
border-left: solid 1px #666;
font-weight: bold;
color: #fff;
line-height: 12px;
}
.mGrid .pgr a
{
color: #666;
text-decoration: none;
font-size: 13px;
}
.mGrid .pgr a:hover
{
color: #AED434;
text-decoration: none;
font-size: 13px;
}
/************************END GRID STYLE************************************/
/************************mGrid Table Look alike STYLE************************************/
.mGridLookAlikeTable
{
width: 100%;
background-color: #fff;
margin: 5px 0 5px 0;
border: solid 1px #525252;
border-collapse: collapse;
font-size: 13px;
/*width: 820px;*/
text-align: center;
}
.mGridLookAlikeTable td
{
padding: 2px;
border: solid 1px #c1c1c1;
color: #717171;
height: 20px;
}
.mGridLookAlikeTable th
{
padding: 4px 2px;
color: #fff;
background: #424242 url(images/grd_head.png) repeat-x top;
border-left: solid 1px #525252;
height: 20px; /*font-size: 15px; */
}
/************************END mGrid Table Look alike STYLE************************************/

Resources