Currently, I am attempting to enhance the design of a self-programmed board. However, I seem to be encountering strange bugs with the CSS rendering:
Each row of the board is assigned the .BoardRow class for formatting in CSS. Here is the code snippet I am using:
.BoardRow td {
border: 2px dotted #4E6011;
background-image:-webkit-linear-gradient(bottom, #FFFFFF 33%, #EFEFEF 90%); /* Chrome, Safari */
}
This code is aimed at adding visually appealing borders around each row. Strangely, the top row consistently fails to display correctly. When zooming in with CTRL + Mouse in Google Chrome, the top border always appears distorted as shown in the image. How can I resolve this issue?
EDIT: Below is the complete generated HTML Code:
<div id="Top">
<div id="Navi"> <a class="Link" href="index.php?s=home">Startseite</a> <a class="Link" href="index.php?s=physicians">Ärzteliste</a> <a class="Link" href="index.php?s=pmr">Polymyalgia Rheumatica</a> <a class="Link" href="index.php?s=logout">Abmelden</a> <a class="Link" href="index.php?s=course">Krankheitsverlauf</a> <a class="Link" href="index.php?s=board">Forum</a> </div>
</div>
<div id="Main">
<table id="Board">
Seite (1 von 1)
<tr>
<td class="BoardHeadline">Thema</td>
<td class="BoardHeadline">Beiträge</td>
<td class="BoardHeadline">Angesehen</td>
</tr>
<tr class="BoardRow">
<td class="BoardName"><a href="index.php?s=board&threadid=3">asdfasdfas</a> von (Unbekannter Benutzer)<br />
geschrieben am 25:03:2013 um 15:43 </td>
<td class="BoardCounter">3</td>
<td class="BoardCounter">20</td>
</tr>
<tr class="BoardRow">
[...]
</table>
<br />
<a href="index.php?s=board&action=newthread&where=2">Neues Thema eröffnen</a> </div>
<div id="UserPanel"> <a href="index.php?s=profile">Benutzerprofil</a> </div>
Below is the link to view the CSS file used:
Please note that I am not an expert in HTML or CSS. ;)
The issue persists not only in my portable version of Google Chrome 19 on a USB stick but also on locally installed Internet Explorer 8.