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--------------------------------------------------------------------------------------------------------------------------------------------------------------------------
ArikkanAsked:
Who is Participating?
 
Bob LearnedCommented:
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
0
 
Bob LearnedCommented:
What does the CSS look like?
0
 
ArikkanAuthor 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----------------------------------------------------------------------------------------------------------------------------------------------------------
0
Cloud Class® Course: Microsoft Windows 7 Basic

This introductory course to Windows 7 environment will teach you about working with the Windows operating system. You will learn about basic functions including start menu; the desktop; managing files, folders, and libraries.

 
Bob LearnedCommented:
What does the CSS look like?
0
 
ArikkanAuthor Commented:
I am not sure what part of CSS do you want?
0
 
ArikkanAuthor Commented:
I posted 2 photos in my previous message which have the CSS:

Chrome: Inspect element
Firefox: Inspect element
0
 
Bob LearnedCommented:
What are the values on Computed tab from the Developer Tools?  Are they the same between Chrome and Firefox?
0
 
ArikkanAuthor Commented:
Yes. The values are the same and the display is different.

So I have to resolve this issue.
0
 
Bob LearnedCommented:
I can't see anything, yet, that would explain.  I don't see any border CSS.  Can you post the CSS file please?
0
 
ArikkanAuthor 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
0
 
ArikkanAuthor Commented:
Thanks
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.