It took me couple hours to figure out the problem area which was showing a two pixel white line between nav bar with stacked images in Firefox. Chrome was not showing this but Firefox did.

Here is how it looked in Firefox

And in Chrome (looked neat)

I did not mention ‘Height’ attribute for my tables, which are sitting beside each other in CSS. So I thought, this is what causing my stacked images to push further below and mess up the alignment.

But if this was the case, then why was it pushing down the image in middle instead from top or bottom? Why only in Firefox? And no wonder, Height attribute was not the culprit here.

How to Fix this?

Fix is very simple.
It is a must to set attributes – border: 0px and display:block when images have <a> tag around them.

My CSS before

#navbar tr td img {
 width: 255px;
 border-top-width: 0px;
 border-right-width: 0px;
 border-bottom-width: 0px;
 border-left-width: 0px;

My Fixed CSS

#navbar tr td img {
 width: 255px;
 border: 0px;
 display: block;

May be, Google Chrome ignores this attribute and Firefox doesn’t. So, next time you see something like this – make sure you have display:block; set along with border: 0px

Hope this helps 🙂