Safari vs. Chrome Compatibility Issues

Question

I'm new to html and css and am when I load my website into Safari it looks different than the version I made in Chrome. I'm aware there's things like cross browser compatibility issues, but I'm naive as to the best way to go about fixing this site now.

The main issue seems to be an absolutely positioned div and p tag, and social icons that aren't located in the right spot in Safari. I was hoping someone could offer me suggestions. I can't even figure out what the browser compatibility issue is between chrome and safari in this instance. Thank you for any help!

here is the link

The HTML for the p tag is:

 <div class="slogan">
 <p>Your only trustworthy source on the web for accurate and up-to- date news on the Loch Ness Monster.</p>
</div>

And the CSS is:

.slogan {
position: absolute;
margin-top: 55px;
margin-left: 170px;
margin-right: auto;
font-family: cursive;
font: 100px;
text-align: center;
}

Answer 1

change your css add position top

.fb {
 position: absolute;
 left: 1046px;
 top: 0;
}
.twit {
 position: absolute;
 left: 1000px;
 top: 0;
}

Change to this class remove margin-top add top position

.slogan {
 font-family: cursive;
 margin-left: 170px;
 margin-right: auto;
 position: absolute;
 text-align: center;
 top: 58px;
}

• John Wolfe: thanks for your response! i tried that and it didn't do anything. i wonder what the browser compatibility issue is?