CODEWITHSUNDEEP
javascriptjqueryhtmlcsscross-browser
John Wolfe
John Wolfe

Reputation: 1

Safari vs. Chrome Compatibility Issues

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;
}

Upvotes: 0

Views: 624

Answers (1)

Lalji Tadhani
Lalji Tadhani

Reputation: 14159

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;
}

Upvotes: 1

Related Questions