I have made a website.It worked all fine during the whole development and testing phase of over 20 days during which I viewed the pages always in firefox and they were all fine.But today suddenly I encountered a problem with firefox. The table data are not centered and the borders are not rounded as they used to be earlier.But they are all fine in Google Chrome..You can view the screenshots :
Mozilla Firefox (It not used to be like this !)
Google Chrome
Please tell me how to fix it..I have cleared all the cache and session of firefox but still its the same
UPD
Ok so I am providing the codes as well:
The Php code (only snippet) of the table
$result = mysql_query("SELECT username,rating,contests,rank from users order by (rating) desc limit 10");
echo '<table id="problems">
<thead><tr>
<th colspan="3" align="center" ><font color="red" ><h2>Top Rated</h2></font></th>
</tr></thead>
<tr>
<th>#</th>
<th>Username</th>
<th >Rating </th>
</tr>';
while($row = mysql_fetch_array($result))
{
require_once("color_gen.php");
require_once("rankings.php");
ranker_rater();
$color=ColorGen($row['rating'],$row['contests']);
$uname=$row['username'];
$rank=$row['rank'];
echo "<tr>";
echo "<td>" . $rank. "</td>";
echo '<td><a href="profile.php?search=' . $uname . '" class="a"><font color="'.$color.'">'.$uname.'</font></a></td>';
echo "<td>" . $row['rating'] . "</td>";
echo "</tr>";
}
echo "</table>";
And the corresponding CSS
#problems
{
text-align:centre;
border:solid;
border-width:2px;
border-color:#CCC;
width : 100%;
}
#problems th,td
{
padding: 4px;
font-weight: normal;
border:solid;
border-width:1px;
border-color:#CCC;
font-size: 15px;
color: #039;
//background: #b9c9fe;
text-align:center;
}
Know that different browsers have different default functions. This is the fundamental manner in which I attack this problem. Google chrome typically is more kind to web developers and is better at correcting errors. But, if you want something to be consistent throughout all browsers, ensure that the values are stated explicitly.
Problem 1 – Text not centered: I notice that in your CSS, your first line assigns text-align to “centre.” The internet was founded by Americans, and all browsers will support the American spelling of “center.” The problem is probably that Firefox does not support the British spelling of the word. I won’t know until its tried, though.
Problem 2 – Corners not rounded: Since I am not a very skilled web developer, this is a problem I do not know how to solve. However, I’ve found a blog post by someone who does.