By default, img elements are displayed inline, meaning they sit on the text baseline and there is blank space below them for possible descenders (like the lower line on the p). To display img elements in table cells without a descender area, you could use this:

td img {
  display: block;
}

IE has a developer cheat which takes care of this for you, and I guess Chrome is emulating that. But Firefox doesn't.

Thanks so much for your quick response.

Why does this only happen on certain pages?  I use this same template for the entire site and it’s only happening on the one page.  I also have it occur occasionally on other website, only certain pages.  

I tried using the code that you recommended but it shifted the entire design.

NancyDee said

I tried using the code that you recommended but it shifted the entire design.

Not sure what you mean. Here's my before-and-after pasting the rule into the Style Editor section of the developer tools (screen shots attached).

When I compare "before and after" in Chrome, I see the space below the yellow button gets taller. Screen shots attached. That image is followed by two <br> elements. With the display changed from inline to block, you only need one.

If you really only want to affect particular images in the page, you can use an inline style:

<img style="display:block" src=...

Ok, when I viewed the page locally, it didn't reflect the change. But I uploaded the new css file to the live site with the code you suggested and it looks like it did the trick.

Thank you so much for your help! I really appreciate it.

NancyDee said

Why does this only happen on certain pages? I use this same template for the entire site and it’s only happening on the one page.

It's hard to say. The number of colspans and rowspans might be out of balance somewhere. but it's too complicated for me to suss out.