[MarmiteX1]

Hi,

I am trying to style the gridview using CSS so that the surrounding borders and headers are removed but i am having issues regarding this. The changes are not being made apart from the border-style.

Here is my sample CSS code

#ProductGrid
{
	border-style:none;
	border-top:none;
	border-bottom:none;
	
}

#ProductGrid table
{
	border-style:none;
	margin-left:6%;
	
}

#ProductGrid td
{
	border-style:none;
}

#ProductGrid tr
{
	border-style: none;
}

#ProductGrid th
{
	border-style:none;
}

So when i view the page in the web browser the Gridview is still displayed with its original styling set. Do i have to disable the Gridview Styling in the properties of Visual Studio in order to use my CSS?

Thanks,

[Martyr2]

Have you tried actually setting the width to 0? If you don't want a border to show, you can typically use something like border-top: 0px; which of course says make the border have no width.

Give that a try. If that doesn't work, you may have to make style changes through visual studio since it may be using a template of some sort.

[keakTheGEEK]

Also keep in mind that when you use a master page in your ASP .NET website, More information is added to your server control IDs in the rendered HTML. In most cases the controlId is preceded with the ID of the container it's in. I typically use css classes instead of referencing the controls id specifically.

.ProductGrid
{
        border-style:none;
        border-top:none;
        border-bottom:none;
        
}

.ProductGrid table
{
        border-style:none;
        margin-left:6%;
        
}

.ProductGrid td
{
        border-style:none;
}

.ProductGrid tr
{
        border-style: none;
}

.ProductGrid th
{
        border-style:none;
}

Then you can set the CssClass attribute equal to .ProductGrid in the mark up on the aspx page where you create the Gridview.

 <asp:GridView ID="GridView1" runat="server" CssClass="ProductGrid">
          <%-- Rest of your code --%>
 </asp:GridView>