Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

border-radius for table doesn't work in Firefox

border-radius for table doesn't work in Firefox

Problem

Everything works just as it should in Internet Explorer and Chrome. But in Firefox there is no rounded corners at all. Does anybody have a clue what the problem might be? I've tried to remove the -moz- and -webkit- tags but it doesn't make any difference. Border-radius should be supported by the latest version of Firefox, Chrome and Internet Explorer.

Any solution?

Code:

.evenOddColoursLight tr:not(.noEvenOddColoursLight), .evenOddColour1L{
background-color:#f6f6f4;
}
.evenOddColoursLight tr:nth-child(odd):not(.noEvenOddColoursLight), .evenOddColour2L{
background-color:#efeeeb;
}

.forum-table th:first-child {
-moz-border-radius: 10px 0 0 0;
-webkit-border-radius: 10px 0 0 0;
border-radius: 10px 0 0 0;
}

.forum-table th:last-child {
-moz-border-radius: 0 10px 0 0;
-webkit-border-radius: 0 10px 0 0;
border-radius: 0 10px 0 0;

}

.forum-table tr:last-child td:first-child {
-moz-border-radius: 0 0 0 10px;
-webkit-border-radius: 0 0 0 10px;
        border-radius: 0 0 0 10px;
}

.forum-table tr:last-child td:last-child {
-moz-border-radius: 0 0 10px 0;
-webkit-border-radius: 0 0 10px 0;
        border-radius: 0 0 10px 0;

}

.forum-table table tr:last-child td {
border-bottom: none;
}

.forum-table td {
padding:10px;
}

.forum-table th {
padding:5px 5px 5px 10px;
}

All the at is found at code: http://jsfiddle.net/SUhsD/

Problem courtesy of: Patrik Boxon Nicklasson

Solution

Solved it by removing the .evenOddColoursLight and added:

.forum-table tr:nth-child(odd) td, .forum-table tr:nth-child(odd) th {
  background-color: #efeeeb;
}

.forum-table tr:nth-child(even) td, .forum-table tr:nth-child(even) th{
  background-color: #f6f6f4;
}
Solution courtesy of: Patrik BoXon Nicklasson

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

border-radius for table doesn't work in Firefox

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×