I was working on a new site design, and I came across and issue with CSS rendering in Firefox and Chrome. Internet Explorer calculates the width of an object from the nearby border (like we think practically) whereas, Mozilla and Chrome calculates it in terms of the content. It becomes a problem when trying to align something and you notice that Mozilla and Chrome takes up a little more pixels compared to Internet Explorer.. I got a fix for that from some site, just add this code in the css file:
This fixed my problems in Firefox, Chrome and IE8. I havnt tried it in IE6 and older browsers..
CODE:
-moz-box-sizing:border-box; box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box;margin:0;padding:0;
-moz-box-sizing:border-box; box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box;margin:0;padding:0;
This fixed my problems in Firefox, Chrome and IE8. I havnt tried it in IE6 and older browsers..
