P tags appearing lower in firefox than in internet explorer, using CSS

Question

I made a website that looks perfect on Internet Explorer, but when it is loaded with Firefox, certain elements are out of alignment.

For example, a p tag that would appe

Answer 1

Each browser has its own CSS applied by default. To counter this, it is good practice to use some sort of CSS normalization (as pointed out by @You) before applying custom CSS. CSS normalization is recommended over an outright reset because it

• Preserves useful defaults, unlike many CSS resets.
• Normalizes styles for a wide range of elements.
• Corrects bugs and common browser inconsistencies.

Source: Normalize.css

Also, do check out Initializr. It offers that plus a lot more, including IE6+ compatibility/fallbacks etc.

If not that, you could use a basic CSS reset,

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,
fieldset, form, 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%;
   font: inherit;
   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;
}
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;
}

Source: http://meyerweb.com/eric/tools/css/reset/