Chrome CSS absolute position glitch

Question

I want to make a gallery generated by php where every image is grayscale and becomes coloured only when the mouse goes over it. For various reasons I didn't want to use CSS image backgrounds so I went with absolute positioned images instead. When the cursor hovers over a table's td element the absolute positioned image pops over the gray image. Since no coordinates length or width is defined the rgb image should be right on top of the gray one. In Firefox that's exactly what happens but in Chrome the first and second images in every row are shifted to the left. The last third picture works fine.

#main #album {
    width:100%; /* 600px */
}
#main #album  td{
    padding-bottom:20px;
    text-align:center;
}
#main #album  td img:first-child{   
    position:absolute;
    display:none;
}
#main #album  td:hover img:first-child{
    display:inline;
}
<table id="album">
<tr>
<td><img src="/img/mini/dezsma01.jpg" /><img src="/img/mini/gray/dezsma01.jpg" /><br />A
<td><img src="/img/mini/dezsma01.jpg" /><img src="/img/mini/gray/dezsma01.jpg" /><br />B
<td><img src="/img/mini/dezsma01.jpg" /><img src="/img/mini/gray/dezsma01.jpg" /><br />C
</table>

UPDATE

The CSS reset suggested by diggersworld solved the problem, but I have also tried to use lists and that worked too. Here is the code:

#main #albumlist {
    width:100%; 
    list-style-type:none;
}
#main #albumlist a {
    float:left;
    display:block;
    width:180px;
    height:auto;
    padding-left:20px;  
    padding-bottom:20px;
    text-align:center;
}
#main #albumlist li a:first-child{
    padding-left:0;
}
#main #albumlist a img:first-child {
    position:absolute;
    display:none;
}
#main #albumlist a:hover img:first-child {  
    display:inline;
}

<ul id="albumlist"><li>
        <a href="/img/big/dezsma01.jpg"><img src="/img/mini/dezsma01.jpg" /><img src="/img/mini/gray/dezsma01.jpg" /><br />A</a>
        <a href="/img/big/dezsma01.jpg"><img src="/img/mini/dezsma01.jpg" /><img src="/img/mini/gray/dezsma01.jpg" /><br />B</a>
        <a href="/img/big/dezsma01.jpg"><img src="/img/mini/dezsma01.jpg" /><img src="/img/mini/gray/dezsma01.jpg" /><br />C</a>
</li></ul>

Answer 1

The difference in behaviour could be down to a number of things. Usually the main issue is the difference between browser default styles, as they all have a set of defined presets. These presets can be overridden easily by using a reset stylesheet. This basically resets all CSS attributes to a base starting point and provides a level foundation to build upon for all browsers.

http://meyerweb.com/eric/tools/css/reset/

I mentioned in the comment that using a table isn't the ideal solution. Tables used to be used commonly in the 90s for layout. However CSS has become more useful since then and allows developers to achieve a lot more with less HTML.

You should most definitely master the art of using lists. They tend to be one of the elements I use the most when developing websites. You'll be surprised how many things are actually lists when you break them down semantically. They're also a lot more flexible than tables and you will see a massive benefit if you ever delve into responsive web design.