Header Column in Gridview does not align properly

the gridview header column moves to the right when loaded.

tried adding :  position: relative;
but still cannot.

.grid .datatable TH
{
    font-size:12px;
    font-weight:bold;
    letter-spacing:0px;
    text-align:left;
    padding:2px 4px;
    color:#333333;
    border-bottom:solid 2px #bbd9ee;
    position: relative;
}
untitled01.bmp
LVL 1
doramail05Asked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

masterpassCommented:
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>
1
doramail05Author Commented:
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"  />

Open in new window

0
masterpassCommented:
Try it like this

<asp:BoundField DataField="somedata" HeaderText="Data" HeaderStyle-HorizontalAlign="Left"  ItemStyle-HorizontalAlign="Left" />
0
OWASP: Avoiding Hacker Tricks

Learn to build secure applications from the mindset of the hacker and avoid being exploited.

doramail05Author Commented:
it works

but when comes to one table like this, it still did not 100% left align, shown in pic
untitled02.bmp
0
masterpassCommented:
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
0
doramail05Author Commented:
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;
   
}

Open in new window

0
masterpassCommented:
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
0
doramail05Author Commented:
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
0
masterpassCommented:
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 ?
0
doramail05Author Commented:
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;    
}

Open in new window

0
masterpassCommented:
remove padding

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

.grid .datatable .row TD
{
    font-size:11px;
    text-align:left;
    padding:6px 4px;--- > remove this
}  

.grid .datatable .row TD.first { padding-left:10px; }--- > remove this
.grid .datatable TH.first { padding-left:10px; }--- > remove this



0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
ASP.NET

From novice to tech pro — start learning today.