How do I get cross-browser consistency for spacing elements?

Question

I wrote a little application that is an image slider with a couple logos on the top. The spacing is very important for this project, and it is inconsistent across browsers. I have no idea how to fix this, and I'm really stressing out.

This is what it should look like: http://i.imgur.com/ycyeH.jpg

Thank you so much for your help.

Answer 1

I have checked your CSS and I can't see any CSS reset statement in it. Different browsers have different defaults when it comes to undeclared margins or paddings etc. You could insert some statements by yourself at the top, such as

* {margin: 0px; padding: 0px}

but there might be other problems such as the different way overflow is managed etc.

So maybe the best option is to include a CSS reset from a library, such as

• http://html5boilerplate.com/ (my favourite)

• or http://html5reset.org/ (I think this one is more lightweight even if it doesn't come with all the bells and whistles).

However, next time try to use jsfiddle as suggested in the other answer, or just learn how to include code here in the post, so we don't need to download archives to view your code.