Geek Answers Handbook

Sending text between OS X and Windows resets my add-ons?

Hi guys, I'm trying to create a h1 client article with a simple background color and padding. I need text that will be vertically and horizontally indented, but I find there a basic difference between OS X and Windows. At least that's my best guess. Here is the specific code for the violating elements:

.entry-title { color: #fff; background: #A3BCC3; font-size: 24px; text-transform: uppercase; text-align: center; } .normal .entry-title { float: left; width: 100%; padding: 10px; margin-bottom: 30px; }

Here are the screenshots:

OS X: http://i54.tinypic.com/2a0bx1v.png

Windows: http://i56.tinypic.com/2gv4vie.png

You will notice that the rendering just works fine on Windows, but it is too high on OS X. They display the same in all browsers, the only difference between the operating systems. The font is Quicksand Book, and it is implemented through @ font-face. If you need a working version of the site, it is available at http://angryg.nom.es/rosebud. If you manage to verify this, you will notice that I have the same problem on the footer of static content at the bottom of the main page.

In any case, any help would be greatly appreciated.

+1
source share
3 answers

You need to specify the line height for a specific browser (it hurts) using this type of property: 1.1, etc., specifying pixels, from my experience this works better.

Also, while on a Mac, between Safari and Firefox you will notice the difference between the line heights! Thus, it is not just OSX and Windows.

+2
source

Your font files may be incorrect.
I had the same problem with locally installed webfont. Luckily Google provided the same font as webfont, solved the problem for me.

+2
source

The default font for operating systems is different, so add font-family: Arial to your css elements. It should work on OSX and Windows because Arial is supported by both of them.

0
source

More articles:


All Articles