PaulGardinerLP Posted June 22, 2012 Share Posted June 22, 2012 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! Link to comment Share on other sites More sharing options...
Ingolme Posted June 22, 2012 Share Posted June 22, 2012 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. Link to comment Share on other sites More sharing options...
eTianbun Posted June 22, 2012 Share Posted June 22, 2012 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;} Link to comment Share on other sites More sharing options...
PaulGardinerLP Posted June 23, 2012 Author Share Posted June 23, 2012 Thanks guys, I will try the above. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.