We help IT Professionals succeed at work.

Issue with Border in Firefox for <asp:gridview>

I have <asp:gridview> as part of my program and I am applying CSS classes to the elements:

                                                        <RowStyle CssClass="GridRows" />
                                                        <HeaderStyle CssClass="GridHeader" />
                                                        <EditRowStyle CssClass="EditRows" />
                                                        <AlternatingRowStyle CssClass="GridAlternateRows" />
                                                        <SelectedRowStyle CssClass="SelectedRows" />
                                                        <HeaderStyle CssClass="GridHeader" />

I can view the Grid perfectly in all browsers except firefox where the header element gives me an issue.
See how the Border for the Header Grid is not same as rest of the Grid.
How can I fix this?

--------------------------------------------------------------------------------------------------------------------------------------------------------------------------

The Firefox Grid:
Firefox.gif--------------------------------------------------------------------------------------------------------------------------------------------------------------------------

The Other Browsers Grid:
Other-Browsers.gif--------------------------------------------------------------------------------------------------------------------------------------------------------------------------
Comment
Watch Question

Most Valuable Expert 2012
Top Expert 2008

Commented:
What does the CSS look like?

Author

Commented:
Here are 2 different grids on another page on the site (Using  <ASP:GRIDVIEW>)

You can see that the Grid Header border is missing on Firefox only (All other browsers work fine - IE, Chrome, Safari).
Any ideas on how to solve this?

----------------------------------------------------------------------------------------------------------------------------------------------------------
Chrome:
Chrome.gif
----------------------------------------------------------------------------------------------------------------------------------------------------------
Firefox:
Firefox.gif----------------------------------------------------------------------------------------------------------------------------------------------------------
Most Valuable Expert 2012
Top Expert 2008

Commented:
What does the CSS look like?

Author

Commented:
I am not sure what part of CSS do you want?
Most Valuable Expert 2012
Top Expert 2008
Commented:
If you use Developer Tools in the browser, you should be able to select the trouble-spot element, and inspect the CSS.

Here is a Chrome snapshot:

Chrome Developer Tools

Author

Commented:
I posted 2 photos in my previous message which have the CSS:

Chrome: Inspect element
Firefox: Inspect element
Most Valuable Expert 2012
Top Expert 2008

Commented:
What are the values on Computed tab from the Developer Tools?  Are they the same between Chrome and Firefox?

Author

Commented:
Yes. The values are the same and the display is different.

So I have to resolve this issue.
Most Valuable Expert 2012
Top Expert 2008
Commented:
I can't see anything, yet, that would explain.  I don't see any border CSS.  Can you post the CSS file please?
Commented:
This one was kind of a stupid issue and I finally resolved the problem.

Somehow every browser was rendering the Border-Color for the Header automatically and Firefox was not. So I manually added the Border-Color and VOILA it works.

Your question about CSS prompted me to compare the Computed CSS rendering in different browsers and I did not expect them to render same page with same CSS differently.   :-(


.GridHeader
{
    background-color:#517ca6;
   border-color: #808080;
    color:White;
    text-align: center;
    font-weight: bold;
    padding: 5px;
}

Firefox-Rendering-Issue.gif

Author

Commented:
Thanks