3

Chrome 25 Mac Chrome 23 Windows Firefox 19 Mac Firefox 19 Windows IE 8

(Images, from top: Chrome 25 Mac, Chrome 23 Windows, FF 19 Mac, FF 19 Windows, IE 8)

According to browsershots.org, my site renders the way I want it to look when using each of the currently major Mac OS X browsers— Firefox 18-19, Chrome 23-25, and Safari 5-6. But on Windows each of these same browsers, including IE8 and Opera 12, do not display like their Mac counterparts, and they all seem to display in the nearly identical "wrong" way, which is that menu item font-size is either misinterpreted or overridden— since they all display the same I think this must not be a browser incompatibilty but a system one.

What is causing this, and how and where do I create a system specific hack? I'm a rank amateur and don't know a lot about this; I know for sure that one thing that probably isn't done correctly is the clumsy way I've forced the search form into the navigation bar… it was the only way I could make a menu search form work for the Wordpress thematic theme. I feel like it isn't properly classed, but I don't understand these things.

TL;DR: All major browsers display site the same on a given platform, but site doesn't appear the same across different platforms.

Some hopefully relevant css:

#access,.menu a,.current_page_item {
    display: compact;
    border: none;
    font-size: 30px;
    font-family: 'ChopinScriptRegular', Palatino, Helvetica !important;
    font-weight: 400;
    font-style: normal;
    letter-spacing: -1px;   
}

/*Search form*/
#searchform{
    border: none;
}
#searchform input{
    font-family: 'ChopinScriptRegular', Palatino, Helvetica;
    font-size: 30px;
    border: none;
}
::-webkit-input-placeholder {
    color: #666;
    padding-top: 9px;
}
:-moz-placeholder { /* Firefox 18- */
    color: #666;
    padding-bottom: 2px;
}
::-moz-placeholder {  /* Firefox 19+ */
    color: #666;
    padding-bottom: 2px;
}
:-ms-input-placeholder {  
    color: #666;
}
input, select {
    width: 135px;
    height: 50px;
    border: none;
    background: none !important;    /* menubg search hover, see default.css*/
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
}
.widget_search .screen-reader-text{
    display: none;
}
/*FF*/
@-moz-document url-prefix() {
    input, select {position: relative; bottom: 2px;}
}
/*IE*/
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    input, select {position: relative; bottom: 5px;}
}

/*end*/
Elliott
  • 75
  • 2
  • 10
  • 1
    Hard to say for sure when you don't provide any code from your site, but my guess is differences in OS-provided fonts. – Barmar Mar 08 '13 at 20:29
  • Fonts between Windows and OSX are rendered completely different. This can cause your font to appear larger, or bolder in OSX over Windows. – Axel Mar 08 '13 at 20:29
  • by default Mac OSX fonts are bolder than windows. – Huangism Mar 08 '13 at 20:36
  • The font face is imported and does display correctly always in every browser and system— but there is a huge size variance between the ordinary menu items and what is in the search form, but again, only on the Windows platform. – Elliott Mar 08 '13 at 20:43
  • The whole stylesheet is at [link](http://www.elliottwall.com/wp-content/themes/thematicchildtheme/style.css), still trying to figure out how to post a relevant excerpt, SO is telling me it's too long. – Elliott Mar 08 '13 at 20:45
  • I'd need to see the HTML as well, to determine what the stylesheet is actually affecting. – Josh Burgess Mar 08 '13 at 20:57

3 Answers3

3

Here's your culprit:

.windows .sf-menu a {
  font-size: 12px;
}

On line 168 of styles.css

You're setting a default size for those anchor links, but it isn't being applied to the input element (Search). That's why they're all wonky in Windows. It's not being applied to the Mac browsers.

Josh Burgess
  • 9,327
  • 33
  • 46
  • Excellent, I think this has worked! Since I'm modifying a theme I've avoided messing with anything I didn't know what it was. I wonder why that selector was designed that way, and why/how is it OS specific? Thank you! – Elliott Mar 08 '13 at 22:53
  • Glad to hear it! Please remember to mark this as your answer if it worked for you. – Josh Burgess Mar 08 '13 at 23:41
1

As said by @user2019515, your more than likely using fonts that are not available in OSX, use one of:

  1. standard fonts such as font-family: Arial, Helvetica, sans-serif;
  2. Google Web Fonts http://www.google.com/webfonts
  3. Cufon http://cufon.shoqolate.com/generate/ (renders font perfectly every time regardless of OS or browser)
bizzehdee
  • 20,289
  • 11
  • 46
  • 76
  • Thank you, I should have mentioned I was importing a font. Definitely a good answer by probably not the case here for that reason probably? – Elliott Mar 08 '13 at 20:50
  • if your importing a font and its still rendering differently, i would go with Cufon as it converts the font to vector format and stores it in a JS file and uses that vector format to render the font its self, making the font identical no matter what the browser/os – bizzehdee Mar 08 '13 at 21:01
  • @bizzehdee It's not the font's fault. There's a CSS selector overriding the default font size of 30px with 12px. Check my answer. Removing that style rule fixes the problem. Yeah, the font's a little more blocky in Windows, but what font isn't? Although, using Cufon is a **great** suggestion to fix that problem. – Josh Burgess Mar 08 '13 at 21:10
0

Most probably you're using a font which is only available on Windows but not on Mac, you should specify a few different fonts like so:

font-family: Arial, Helvetica, sans-serif;
Josh Crozier
  • 233,099
  • 56
  • 391
  • 304
user2019515
  • 4,495
  • 1
  • 29
  • 42
  • Thank you, I should have mentioned I was importing a font. Definitely a good answer by probably not the case here for that reason probably? – Elliott Mar 08 '13 at 20:54