Header Column in Gridview does not align properly

Try some thing like this

.grid th
{
      padding:2px 4px;
        color:#333333;
        border-bottom:solid 2px #bbd9ee;
      font-size:12px;
        font-weight:bold;
}

if you are using the Asp:BoundColumn then you can style the header there itself  using HeaderStyle

<asp:BoundField DataField="somedata" HeaderText="Data" HeaderStyle-HorizontalAlign="Center" />

OR
 
<asp:GridView ..... >
<HeaderStyle HorizontalAlign="Left" VerticalAlign="Middle"/>
</asp:GridView>

i tried both css and headerstyle but still cannot

<asp:GridView ID="gvSL" runat="server" 
        AutoGenerateColumns="False" AllowPaging="True" CssClass="datatable"
                    CellPadding="5" BorderWidth="1px" BorderColor="#6E6E6E" 
                 Font-Names="Arial" Font-Size="Small" 
                PageSize="5" GridLines="None" AlternatingRowStyle-BackColor="#efefef" 
            Width="620px" 
                 HeaderStyle-HorizontalAlign="Left" 
            AllowSorting="True" onpageindexchanged="gvSL_PageIndexChanged" 
                    onpageindexchanging="gvSL_PageIndexChanging" onsorting="gvSL_Sorting" >
                    <HeaderStyle BackColor="#BDBDBD" HorizontalAlign="Left" VerticalAlign="Middle"  />

Select allOpen in new window

Try it like this

<asp:BoundField DataField="somedata" HeaderText="Data" HeaderStyle-HorizontalAlign="Left"  ItemStyle-HorizontalAlign="Left" />

it works

but when comes to one table like this, it still did not 100% left align, shown in pic
untitled02.bmp

Ig you have some CSS files for the grid head then remove it,

consider grid th
{
      padding:2px 4px;
}

I feel the padding might be taking effect in your case

removed like it is, but cannot

.grid .datatable TH
{
    font-size:12px;
    font-weight:bold;
    letter-spacing:0px;
    text-align:left;
    
    color:#333333;
    border-bottom:solid 2px #bbd9ee;
   
}

Select allOpen in new window

Have a try like this

<asp:BoundField DataField="somedata" HeaderText="Data" HeaderStyle-HorizontalAlign="Left"  ItemStyle-HorizontalAlign="Left" HeaderStyle-Width="100px"  ItemStyle-Width="100px"/>

Give both Header and Item the same width .. If still its not working ... post your page source for the Header content alone with applicable CSS classes

i post all the website template for visual web developer,
hope u can see the difference.

notice that the extensions have been changed to .html from .aspx & .master due to incompatibility. u can change back anytime

admin/menufolder/operatormenu.aspx
Copy-of-BestResultWS.zip

First, just remove the StyleSheet.css from App_Themes, cut and paste it to some other location. Even though you are not referring it, style sheets in App_themes het automatically referred.. So remove it ang give it a try ... Can you try and get back to me ?

yes, once removed it will align properly

i guess it is the css, i posted all the css

BODY
{
	
}

.FrozenHeader
{
      
    position: relative;
       z-index: 10;
    
}

.progress
{
    display: block;
    position: absolute;
    padding:2px 3px;
}
.container
{
    border: solid 1px #808080;
    border-width: 1px 0px;
}
.header
{
    background-color: #f2f2f2;
    border-color: #808080 #808080 #ccc;
    border-style: solid;
    border-width: 0px 1px 1px;
    padding: 0px 10px;
    color: #000000;
    font-size: 9pt;
    font-weight: bold;
    line-height: 1.9;
    font-family: arial, helvetica, clean, sans-serif;   
}

.progressbody
{
    background-color: #f2f2f2;
    border-color: #808080;
    border-style: solid;
    border-width: 0px 1px;
    padding: 10px;
}


.watermark 
{
      background : #F2F2F2;
      color: #C9C299;
}

.labeltabletitle
{
   font-family:Tahoma; 
    font-size: large;
    font-weight : bold;
}

.money { color:Red; }

.grid th
{
      padding:2px 4px;
        color:#333333;
        
      font-size:12px;
        font-weight:bold;
}


.grid 
{ 
	width:700px; 
	font-family:Tahoma;
	
}
.grid H2 
{ 
	margin:0; padding:0; 
	color:#ffffff;
	height:20px;
	line-height:20px;
	font-size:14px;
}
.grid .mid
{
	padding:3px 0px 0px 0px;
}
.grid .datatable
{
	width:100%;
	color:#666;
}        
.grid .datatable TH
{
    font-size:12px;
    font-weight:bold;
    letter-spacing:0px;
    text-align:left;
    
    color:#333333;
    
   
}
.grid .datatable TH A
{ 
	text-decoration:none;
	padding-right:18px; 
	
	
}
.grid .datatable TH.sortasc A { background:url(../App_Themes/asc.gif) right center no-repeat; }
.grid .datatable TH.sortdesc A { background:url(../App_Themes/desc.gif) right center no-repeat; }
.grid .datatable .row TD
{
    font-size:11px;
    text-align:left;
    padding:6px 4px;
    
}      
.grid .datatable .row:hover
{
	background-color:#fffacd;
	color:#000;
}
.grid .datatable .row TD.first { padding-left:10px; }
.grid .datatable TH.first { padding-left:10px; }
.grid .datatable .row:hover .first
{
    background-repeat:no-repeat;
	background-image:url(../App_Themes/bullet.gif);background-position:left center ;
}  
/* Data Pager Styles */
.grid TR.pager-row TD
{
    border-top:solid 2px #bbd9ee;
}
.grid .pager
{
    font-family:arial,sans-serif;
    text-align:center;
    padding:6px;	
    font-size:14px;
   
    
} 
.grid .pager SPAN.command,        
.grid .pager SPAN.current,        
.grid .pager A.command,

.grid TR.pager-row TD A
{
    
    padding:0px 4px;
    text-decoration:none;
    border:none;
}
.grid .pager A.command:hover,
.grid TR.pager-row TD A:hover
{
    
    background-color:#59A5D1;
    color:#fff;
    padding:0px 3px;
    text-decoration:none;
}        
.grid .pager SPAN.current,
.grid TR.pager-row TD SPAN
{
	border:none;
    font-weight:bold;
    color:#3e3e3e;
    padding:0px 6px;
}
.grid TR.pager-row TD
{
	border-top:none;
	text-align:center;
}
.grid TR.pager-row TABLE
{
	height:30px;
	margin:0 auto 0 auto;
}

.level1
{
    color: Black;
    background-color: #ede178;
    /*font-variant: small-caps; */
    font-size: 12px;
    font-weight: normal;
    font-family:Arial;
    border-width : 1px;
    border: 1px solid;  
    border-color: #cccccc;
    padding: 4px;
    width:150px;
   
    
}

.level2
{
    color: black;
    font-family: Arial;
    font-size: 11px;
    background-color: #EEEDED;
    border-width : 1px;
    border: 1px solid;  
    letter-spacing :normal;
    padding: 4px;
    width:150px;
    
}

.level3
{
    color: black;
    font-family: Arial;
    font-size: 11px;
    background-color: #EEEDED;
    border-width : 1px;
    border: 1px solid;  
    letter-spacing :normal;
    padding: 4px;
    width:150px;
}

.hoverstyle
{
    color: Red;
    font-weight: normal;
    background-color:#ffffff;
}
       
.sublevel1
{
    color: black;
    font-family: Arial;
    font-size: 11px;
    background-color: #EEEDED;
    border-width : 1px;
    border: 1px solid;  
    letter-spacing :normal;
    padding: 4px;
    width : inherit;    
}

Select allOpen in new window