Site looks fine in Safari on Mac but not so good on IE11 or FIrefox on Windows


#1

Is there anything I need to make sure of when creating a HTML5 page in Hype that ensures it will look good on all (or at least most browsers and systems)

I made sure there were no compatibility flags (like you get when using opacity and a rounded corner)
and most of the site is fine.

the one thing that seems to be different on each browser is the text. in Safari on Mac it looks the same as in Hype. in IE11 or Firefox the text is bigger and doesn’t fit the reserved spaces anymore.

if you want to take a look http://www.leftoverlasagne.com/sichtjaeger/


(Rick) #2

See if this helps a bit: HTML export increasing letter spacing


#3

awesome thanks…

will try later… looks like it might be the solution.


#4

unfortunately it didn’t help. :frowning: any other ideas?

also it doesn’t really seem to be a browser but a platform problem
the fonts look fine on safari and firefox on mac (although firefox makes the fonts MUCH bolder than they are in Hype or Safari)

but on Windows it the fonts are not displayed correctly on either IE11 or Firefox


#5

You may want to extend the available width of the text boxes. IE might be increasing letter-spacing or word-spacing. Here’s how it looks for me in IE11:

The width of this element is 438px, but the line is breaking because there’s not enough space due to how IE11 renders your text.


#6

Thank you.

I’ve been able to make it look fine on a variety of browsers now with a slight change to the design.


(Rick) #7

Good to read you got it looking fine :grinning: . Maybe another tip that works at least for me is to ad the following to the body style to the head of my documents to prevent FF from bolding text and Safari from making text look thinner then thin:
body {
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: subpixel-antialiased;
}


#8

Hi Rick4F,

amazing… thanks. works super fine!