CSS appears different on Windows than Mac

Question

When I view the site in Windows then most of the site, like the top text, right contact details, nav text and welcome text appear lower than they do on the mac. Mac browsers sho

Answer 1

I know this is an old thread, but I thought I'd offer another answer... A solution I've used is to detect the OS using js, and set a class on the body denoting the OS.

//Windows
if (navigator.appVersion.indexOf("Win") != -1){
  document.getElementsByTagName("body")[0].classList.add("win");  
}
//Mac
else if (navigator.appVersion.indexOf("Mac") != -1){
  document.getElementsByTagName("body")[0].classList.add("mac");
}

Then in your css you can make special rules for the specific scenarios you need:

.some-class-name{
  margin-top: 3px;
}

.mac .some-class-name{
  margin-top: 5px;
}