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

The problem is the different default styles that browsers have. Neither way of displaying your page is wrong, they are just different.

You have compensated for the default styles of one browser, which makes it look quite different in all other browsers. As long as you compensate for the default styles instead of overriding them, you will have that problem.

For example, for the .slogan style you should set the top and bottom margin to zero, instead of using relative positioning to compensate for the default margin. You can use line-height to center the text vertically in the element, instead of moving it up or down to place it in the center.

Example:

.slogan{
  width: 960px;
  line-height: 30px;
  margin: 0 auto;
  color: white;
  font-size: 1.3em;
  font-family: 'Aldrich', cursive;
}

Answer 2

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

Answer 3

Different browsers have different CSS presets, or defaults. Therefore the default rendering will vary. In order to get around this problem, you can use a CSS reset stylesheet. Here is one that works well:

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

Using a reset stylesheet will remove any browser defaults. You can then add in your own margin/padding styling. This may require some adjustments to your current CSS values, but it will help overall when making your CSS cross-browser compatible.