CSS appears different on Windows than Mac

StackOverflow https://stackoverflow.com/questions/22700119

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 show the CSS as it should be. Please help me out...

Mac screenshot

https://www.dropbox.com/s/qwe9hxfkfie3xqu/Mac%20screenchot.png

Windows screenshot

https://www.dropbox.com/s/b9cnl3lczzrcmtp/Windows%20screenshot.png

HTML

<body>
<div id="wholepage">
<header>
<div id="nav_top">
<nav>
<h1 class="slogan">Steel & Fabrication Specialists</h1>
</nav>
</div>
<a href="index.html"><img class="kks_logo" src="KKSLogo.png" border="0" alt="KKS Services   Ltd logo"></a>
<h1 class="logo">KKS</h1>
<h2 class="logosub">Services Ltd</h2>
<h3 class="head_contact">0113 2826946</h3>
<h3 class="head_contact"><a href="contact.html">enquiries@kksservices.co.uk</a></h3>
<nav id="main_nav">
<ul id="nav_main">
 <li><a class="current_index" href="index.html">HOME</a></li>
 <li><a class="domestic" href="domestic.html">DOMESTIC</a></li>
 <li><a class="automation" href="automation.html">AUTOMATION</a></li>
 <li><a class="commercial" href="commercial.html">COMMERCIAL</a></li>
 <li><a class="contact" href="contact.html">CONTACT</a></li>
</ul>
</nav>
<img class="rivot" src="rivot.png" alt="KKS Services Ltd Rivot"/>
<img class="rivot2" src="rivot.png" alt="KKS Services Ltd Rivot"/>
<img class="rivot3" src="rivot.png" alt="KKS Services Ltd Rivot"/>
<img class="rivot4" src="rivot.png" alt="KKS Services Ltd Rivot"/>
</header>
<section>
<article>
<img class="railings" src="index_rail.png" alt="KKS Services Gates and Railings"/>
 <div id="welcome">
<h1 class="welcome">Welcome</h1>

CSS

.slogan{
position: relative;
width: 960px;
margin-left: auto;
margin-right: auto;
left: 10px;
top: -5px;
color: white;
font-size: 1.3em;
font-family: 'Aldrich', cursive;
}
.kks_logo{
position: relative;
top: 50px;
}
.head_contact{
font-family: 'Aldrich', sans-serif;
position: relative;
left: 10px;
top: -175px;
font-size: 1.5em;
text-align: right;
}
ul#nav_main li{
display: inline;
padding: 26px;
}
ul#nav_main li a{
text-decoration: none;
color: white;
font-family: 'Aldrich', sans-serif;
font-size: 1.4em;
position: relative;
top: 13px;
}
#welcome{
position: relative;
top: -267px;
left: 70px;
width: 840px;
height: 35px;
background-color: rgba(0,0,0,0.6);
border-radius: 5px;
}
#welcome h1{
color: white;
font-family: 'Aldrich', sans-serif;
padding: 10px;
font-size: 200%;
position: relative;
top: -5px;
left: 10px;
}

Thank You!

Was it helpful?

Solution

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

OTHER TIPS

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

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.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top