I dont understand why I get an additional white pixel when putting a span tag around single letters. It works on chrome but not on safari. It needs to do something with the number of span tags since it is always at the same position. Here is the code: https://nopaste.me/view/0df8d1e6
And here are some screenshots:
Safari
Chrome
In case the link to the full code doesn't work any more here is a shorter version generating the same white pixel in front of the 130.
<html>
<head>
<style>
span {
font-family: "Lucida Console", Monaco, monospace;
font-size: 10px;
}
pre {
-webkit-background-clip: padding-box;
}
.isConserved {
background-color: #D8D7D6;
}
.isNotConserved {
background-color: none;
}
.isHelix {
background-color: #E2B8B7;
}
.is3_10Helix {
background-color: #F4BF91;
}
.isSheet {
background-color: #B9DBE5;
}
.isRandomCoil {
background-color: none;
}
</style>
</head>
<body>
<table border="0">
<tbody>
<tr>
<td>
<pre>
<span> <span class="isHelix"> </span><span class="isHelix"> </span><span class="isHelix"> </span><span class="isRandomCoil"> </span><span class="isRandomCoil"> </span><span class="isRandomCoil"> </span><span class="isRandomCoil"> </span><span class="isRandomCoil"> </span><span class="isRandomCoil"> </span><span class="isRandomCoil">9</span><span class="isRandomCoil">0</span><span class="isRandomCoil"> </span><span class="isHelix"> </span><span class="isHelix"> </span><span class="isHelix"> </span><span class="isHelix"> </span><span class="isHelix"> </span><span class="isHelix"> </span><span class="isHelix"> </span><span class="isHelix">1</span><span class="isHelix">0</span><span class="isHelix">0</span><span class="isHelix"> </span><span class="isHelix"> </span><span class="is3_10Helix"> </span><span class="is3_10Helix"> </span><span class="is3_10Helix"> </span><span class="isHelix"> </span><span class="isHelix"> </span><span class="isHelix">1</span><span class="isHelix">1</span><span class="isHelix">0</span><span class="isHelix"> </span><span class="isHelix"> </span><span class="isHelix"> </span><span class="isHelix"> </span><span class="isHelix"> </span><span class="isHelix"> </span><span class="isHelix"> </span><span class="isHelix">1</span><span class="isHelix">2</span><span class="isHelix">0</span><span class="isHelix"> </span><span class="isHelix"> </span><span class="isHelix"> </span><span class="isHelix"> </span><span class="isHelix"> </span><span class="isHelix"> </span><span class="isHelix"> </span><span class="isHelix">1</span><span class="isHelix">3</span><span class="isHelix">0</span>
</span><span>1 CYP102A1 <span class="isConserved">F</span><span class="isConserved">A</span><span class="isConserved">G</span><span class="isConserved">D</span><span class="isConserved">G</span><span class="isConserved">L</span><span class="isConserved">F</span><span class="isConserved">T</span><span class="isConserved">S</span><span class="isNotConserved">W</span><span class="isConserved">T</span><span class="isConserved">H</span><span class="isConserved">E</span><span class="isNotConserved">K</span><span class="isConserved">N</span><span class="isConserved">W</span><span class="isConserved">K</span><span class="isConserved">K</span><span class="isConserved">A</span><span class="isConserved">H</span><span class="isConserved">N</span><span class="isConserved">I</span><span class="isConserved">L</span><span class="isNotConserved">L</span><span class="isConserved">P</span><span class="isNotConserved">S</span><span class="isConserved">F</span><span class="isConserved">S</span><span class="isConserved">Q</span><span class="isNotConserved">Q</span><span class="isConserved">A</span><span class="isConserved">M</span><span class="isConserved">K</span><span class="isNotConserved">G</span><span class="isConserved">Y</span><span class="isConserved">H</span><span class="isConserved">A</span><span class="isConserved">M</span><span class="isConserved">M</span><span class="isConserved">V</span><span class="isConserved">D</span><span class="isConserved">I</span><span class="isConserved">A</span><span class="isConserved">V</span><span class="isConserved">Q</span><span class="isConserved">L</span><span class="isConserved">V</span><span class="isConserved">Q</span><span class="isConserved">K</span><span class="isConserved">W</span><span class="isNotConserved">E</span><span class="isConserved">R</span>
</pre>
</td>
</tr>
</tbody>
</table>
</body>
</html>Thanks for the help!
