Firefox display issue

OK, I'm several years late to convert my website from tables to div, but I'm having a minor display problem in Firefox. Here's the page:

http://www.inkart.net/illustration/wildlife/aardvark/

The four animal icons at the bottom don't maintain the white background, and the uneven edge look pretty sloppy. Here's the CSS page:

http://www.inkart.net/styles_20.css

(relevant styles here are on the bottom of the page.)

It looks fine in IE, but I would like to eliminate the uneven edges if in Firefox possible. Any help is appreciated!

 

The web developer's mantra: If it works in IE, but not Firefox, your code is wrong.
(Haven't looked at it yet.)

 

And w'ere back. As expected, your markup is wrong. Parent containers are never to expand to contain floated elements. Your page doesn't display correctly in any of the modern browsers. (IE is not a modern browser.)

To do what you want, you need to "clear floats". The easiest way here is to add 'float:left' to the parent container, the div with the class of 'base'.

Never, ever use IE as a reference for how things should work. Never, ever trust IE to do ANYTHING right.

 

Much thanks for the lesson!

 

drhowarddrfine is right.
Always check the page with firefox and if you have a problem you have to use clear:both;