CSS alignment issue in Firefox / Safari (But fine in Chrome)

Question

I'm trying to debug a CSS issue on my site that only happens in Safari and Firefox. Chrome renders it just fine.

The images shouldn't stack like that. They should be positioned in each box.

I've tried various CSS position and HTML changes to get this to work but with no luck. Something I'm not doing correctly here?

website address is http://www.thesignpad.com

Pictures of the issue are as shown below:

https://i.stack.imgur.com/evSzj.jpg

https://i.stack.imgur.com/KWJ1S.jpg

Answer 1

All browsers have default css built in. Each browsers defaults are different. There are nice snippets off css out there you can use to reset all css on browsers to be consistent. This will ensure moving forward your work is consisten across browsers.

As per what the exact css issue is I am not sure. It looks like a line height is causeing a div to float onto the next line but I wont know until you post your code.

Answer 2

You can use webkits for all browsers like :

-webkit-text-shadow: 1px 1px 2px black;
-moz-text-shadow: 1px 1px 2px black;

for detail u can visit http://www.peachpit.com/articles/article.aspx?p=1750586