Ahhh... the fun of coding a website.
Each browser has it's own set of default CSS display settings and each one is a little different. Here's what I did.
At the top of my main CSS file I use a CSS reset initialization section to set the defaults for EVERY browser to be the same. i did that on my latest site revision and for all practical purposes, it looks the same in all browsers. The main differences are that Firefox, Chrome, and Safari support CSS3 for the most part and of course IE doesn't. My site uses curved corners and shadows which are supported in CSS3 and they don't appear as intended in IE.
Below is the section I use. One caveat. This will change the appearance of your site and not necessarily for the better, at least initially. This will change line spacing, table cell spacing, font size, and on and on. But if you apply it and go back and fix your CSS to get everything correct, then it should look the same in every browser.
/*
http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126
License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
font-family:Arial, Helvetica, sans-serif;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
