Question

I’m coding my first site, and didn’t realize how frustrating cross-browser compatibility would be. Here’s my site: http://www.tommaxwell.me. It looks the way I want it to in Safari and Chrome (maybe because they’re Webkit?), but in Opera and Firefox, the spacing between the first header and the tagline is way too much. I can’t figure out how to fix this. I read something about CSS Reset’s, but I’m not sure how to use it or exactly what it is.

CSS:

body {
background-image:url(209241_2453996366505_1946848896_o.gif);
background-position:center center;
background-attachment:fixed;
-o-background-size: 100% 100%, auto;
-moz-background-size: 100% 100%, auto;
-webkit-background-size: 100% 100%, auto;
background-size: 100% 100%, auto;

padding:0;
margin:0;



}

@font-face {
font-family: 'klavika_rgregular';
src: url('klavika-regular-webfont.eot');
src: url('klavika-regular-webfont.eot?#iefix') format('embedded-opentype'),
     url('klavika-regular-webfont.woff') format('woff'),
     url('klavika-regular-webfont.ttf') format('truetype'),
     url('klavika-regular-webfont.svg#klavika_rgregular') format('svg');
font-weight: normal;
font-style: normal;

}



@font-face {
font-family: 'klavika_mediummedium';
src: url('klavikamedium-osf-webfont.eot');
src: url('klavikamedium-osf-webfont.eot?#iefix') format('embedded-opentype'),
     url('klavikamedium-osf-webfont.woff') format('woff'),
     url('klavikamedium-osf-webfont.ttf') format('truetype'),
     url('klavikamedium-osf-webfont.svg#klavika_mediummedium') format('svg');
font-weight: normal;
font-style: normal;

}


h1 {
text-align: center;
margin-top: 10%;
font-family: klavika_mediummedium;
color:#FFFFFF;
font-size: 6.250em;
font-weight: 400;
}


p {
position: relative;
top:-8%;
text-align: center;
font-family: klavika_rgregular;
color:#FFFFFF;
font-size: 1.875em;
font-weight: 400;
}




ul {
position: relative;
list-style-type: none;
margin-top: 5%;
margin-left: 37%;
font-family: klavika_mediummedium;
}


ul li {
font-size: 2.500em;
font-weight: 400;
float: left;
padding-right: 3%;

}

Answer 1

Choose HTML5 Boilerplate as your default template, it comes with Normalize CSS which resets the default settings of all browsers.

HTML5 Boilerplate has comments on almost each line of CSS and HTML, these comments makes it more easy to use.

Your solution is in setting line-height: 30px; to h1 element because h1 has too large font-size so you have to adjust line-height