Databases
StackOverflow2013
Postsdbo
POLetter spacing issue/difference between browsers
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POLetter spacing issue/difference between browsers
    text
    copied!<p>I'm having a problem with a website I'm working on, and I can't seem to find a solution of any kind to it. The problem I'm having lies with the site's top menu: Although it looks ok in most browsers, there's a small handful of them where the menu "breaks" by adding an extra line with the last item.</p> <p>I've been researching what could be causing it and the issue seems to be the way browsers handle letter spacing - Some browsers, particularly mobile ones, seem to add an extra pixel between characters that makes the header content not fit in its space. This happens even when the letter-spacing is set to zero for the whole site: Some browsers seem to just add an extra space so what most browsers use as zero would be -1 for them.</p> <p>I'm at the end of my wits when it comes to fixing this and I can't think of anything other than using an image for the top menu which is, of course, a terrible idea. So I'd like to ask if anyone else here has ran into such issue and if anyone knows how to make it so the character spacing is actually standarized through browsers.</p> <p>The website in question is this one:</p> <p><a href="http://maxworth.ca/blog/" rel="nofollow">http://maxworth.ca/blog/</a></p> <p>You can see the issue by using chrome regularly (It will look ok) and then using the chrome dev tools to render the site as Android 4.0.2 - Galaxy Nexus. The problem seems to crop up on a bunch of (mostly mobile) browsers and, although I know the site wasn't exactly coded to look perfect in mobile browsers, this is the one gamebreaking issue we have currently.</p> <p>Thanks in advance.</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload