Browser Display Differences

[PaulGardinerLP]

Hi guys, I am currently having some issues with certain elements of a website I am building displaying slightly differently in different browsers. One example is: I have a form which contains two text input fields and two buttons. I have the text input fields one beneath the other and the two buttons below them, side-by-side. They sit beside one another fine in Chrome and IE9 (believe it or not!) and barely in Opera. However, in Firefox they do not. I have given the buttons a class and played around with the margins and padding, I also floated each button to the left. I am also aware that each browser has it's own default CSS rules? I imagine this would play a big part in elements displaying differently. Is there a way that I can remove each browsers default rules? I hope someone can help me! Thanks in advance!

[Ingolme]

The way to remove default rules is to set margin and padding yourself. Try setting border width to 0 on the text inputs, it probably will fix some of the problem.

[eTianbun]

Just like Ingolme said, you need to set it yourself! Use the global selector (*) to set all element's padding and margin to 0 (zero):

*{padding:0;margin:0;}

Edited June 22, 2012 by CodeName

[PaulGardinerLP]

Thanks guys, I will try the above.