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?

[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.

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
Bob LearnedCommented:
What does the CSS look like?
0
Why Diversity in Tech Matters

Kesha Williams, certified professional and software developer, explores the imbalance of diversity in the world of technology -- especially when it comes to hiring women. She showcases ways she's making a difference through the Colors of STEM program.

ArikkanAuthor Commented:
I am not sure what part of CSS do you want?
0
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

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
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
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
Programming Languages-Other

From novice to tech pro — start learning today.