I’m using Foundation 1 to build a website, after uploading the website Safari is not showing the page correctly. Any idea on how to fix this? example
I expect you are loading a font that doesn’t exist in the weight that you are trying to load, or selecting to display a font in a weight that is not loaded. If the font can’t be loaded then each browser may deal with these issues differently.
So check that any fonts you load or select, exist. Otherwise reduce the navigation text by a fraction or decrease the spae between items in the Topbar. However, not sure if Foundation can do that.
Why it’s not happening on the other browsers? Why just Safari?
Safari isn’t failing in any way. You’re site works.
Different browsers will deal with this same site very slightly differently.
Am example which I suspect is happening in your case, is that you are doing something like trying to specify and use a weight or style of font that you have not loaded. So all 4 browsers have to create an approximation of what doesn’t exist. Look carefully at the text in your 4 examples and there are a lot of small differences.
In your case, the Nav item that is wrapping onto the next line, has become too large for the available space created in the Foundation Topbar and on Safari it is too big to fit.
A fix would be to follow my initial advice.
Your question is the wrong way round really. You can waste a lot of time trying to answer this question.
It looks fine in Safari for me, and is not showing any errors. It’s a very nice looking site - but it could use a touch of SEO (it doesn’t show up anywhere in Google yet), and perhaps a Google my Business (or whatever they’re calling it today) page.
Thanks. Now that I was able to fix the esthetics with your help I will work with the Google presence.
I did it. That’s how I fixed it. Thanks a lot. Also, great explanation about the issue too. You’re the best.