[Pro] Font Baseline Wrong in Safari

Freeway
1

Hi, Firstly… hello everyone, this is my first post on this forum and indeed my first site designed in Freeway Pro!

Unfortunately, I’m having problems with my site already though :frowning:

I’m trying to use a Google Web font Quicksand light on my home page and have installed the font as per the instructions found on this forum and all seems to have worked OK until I preview the site in the FP preview panel or in Safari. The problem is that baseline seems to shift down so the font appears too low on the page.

When I preview the same page in Firefox it’s in the correct position though??

Can anyone let me know what I’m doing wrong? Do I need to change some formatting settings?

Thanks in advance for your suggestions.
Dan

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

2

Can you post a link showing the issue?

Walter

On May 28, 2014, at 8:31 AM, Dan Rose wrote:

Hi, Firstly… hello everyone, this is my first post on this forum and indeed my first site designed in Freeway Pro!

Unfortunately, I’m having problems with my site already though :frowning:

I’m trying to use a Google Web font Quicksand light on my home page and have installed the font as per the instructions found on this forum and all seems to have worked OK until I preview the site in the FP preview panel or in Safari. The problem is that baseline seems to shift down so the font appears too low on the page.

When I preview the same page in Firefox it’s in the correct position though??

Can anyone let me know what I’m doing wrong? Do I need to change some formatting settings?

Thanks in advance for your suggestions.
Dan

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

3

I haven’t uploaded the site yet so can’t reference anything. Can I upload images to this thread?

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

4

An image won’t show anything useful, I’m afraid. Remember, what you see in the design view in Freeway is only loosely similar to what you will see in the browser, as it is not made out of HTML and is attempting to average a number of different browsers’ personal opinions about HTML rendering anyway. Freeway’s “preview” mode is a WebKit view, so it is structurally similar to Safari and Chrome, but it is not the same thing as Safari. When you Preview in Browser in Freeway, you are using whichever browser you have chosen to open the file:/// url to your page, from within the site folder on your Mac. But when you upload to the Web, then you have really found the cross-platfomr exactly what other people will see version of your site.

Many elements in your page can be sourced from external URLs, and depending on whether the site is being viewed from a file:/// or http:// url, may appear differently, or fail to work at all in some cases. When in doubt, it is always best to place the site on a staging server somewhere and look at it for real, in a range of different browsers and on different machines.

Walter

On May 28, 2014, at 8:36 AM, Dan Rose wrote:

I haven’t uploaded the site yet so can’t reference anything. Can I upload images to this thread?

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

5

Thanks for your help… not sure how I’m going to work this out without uploading. The trouble is my client hasn’t purchased any web space yet so I’m stuck with testing locally until that happens.

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

6

You do have a Web site of your own, don’t you? Simply make a new folder in the server’s web root (wherever your own index.html file is currently uploaded) and set Freeway to upload into that folder. This will give you a staging point where we (and more importantly, you) can look at this ‘for real’. You’ll just go to http://your-server.com/client-folder

Walter

On May 28, 2014, at 9:10 AM, Dan Rose wrote:

Thanks for your help… not sure how I’m going to work this out without uploading. The trouble is my client hasn’t purchased any web space yet so I’m stuck with testing locally until that happens.

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

7

Sorry, still a bit of a novice when it comes to web design. My clients don’t normally ask me to design websites for them so it’s out of my league slightly! Thank god for forums full of experts like this one!

I managed to set up a testing area on some web space that I have.

The URL for the site I’m currently designing is:
http://www.designroutes.co.uk/kj_test/

On my machine the ‘Welcome’ text sits in the middle of the dividers when using Firefox but when I open the site in Safari it pushes the text down.

Is this something I’m doing wrong?

Thanks in advance!

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

8

And if you set your browser’s view options to Zoom Text Only, you will see a different spacing when you change the zoom level, too. The way to fix this entirely is to create a single nested element containing your top bar, text block, and bottom bar.

Draw a single large HTML box (larger than the width of the bars and the height of the combined elements) somewhere on your page. Click once on the top bar, choose Edit / Cut from the main menu (Command-X to its friends) and then double-click inside your large HTML box so you see a flashing text cursor. Paste. Repeat with the text block and the bottom bar. Then move the entire assembly into position where the original content was on the page. By adjusting the space-before and space-after the text, you can refine the spacing between the bars and the welcome text. Once you’ve done this, you should see the same (or similar) layout in both browsers.

In general, trying to make two or three different browsers render the same page exactly the same, pixel for pixel, is a waste of your time and a failure to recognize the way that these materials work. The Web is not print.

Walter

On May 28, 2014, at 3:25 PM, Dan Rose wrote:

Sorry, still a bit of a novice when it comes to web design. My clients don’t normally ask me to design websites for them so it’s out of my league slightly! Thank god for forums full of experts like this one!

I managed to set up a testing area on some web space that I have.

The URL for the site I’m currently designing is:
http://www.designroutes.co.uk/kj_test/

On my machine the ‘Welcome’ text sits in the middle of the dividers when using Firefox but when I open the site in Safari it pushes the text down.

Is this something I’m doing wrong?

Thanks in advance!

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

9

Dan, I checked your link on both Safari and Firefox on my Mac.

In both browsers, the “Welcome” was down closer to the bottom line.

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

10

OK, so I tried your suggestion Walter and I’m still getting the same problem :frowning: Here’s the link again with the revised layout:

http://www.designroutes.co.uk/kj_test/

I did a bit of research into it and apparently there are quite a lot of people having the same font spacing issues when using Google Web Fonts.

I think my only solutions will be to use a regular font (not ideal) or turn all the headers on the site into images (again not ideal but in terms of design this is the best option).

Unless anyone else has had any experience with using Google Web Fonts and knows a solution to correcting the spacing?

Thanks all for the help so far though!

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

11

Remove the height attribute from the inline DIV containing your headline (set the height to Flexible), or simply cut the headline out of that inner div, delete the inner div, and paste the headline (raw) inline between the two rule divs.

Walter

On May 30, 2014, at 12:16 PM, Dan Rose wrote:

OK, so I tried your suggestion Walter and I’m still getting the same problem :frowning: Here’s the link again with the revised layout:

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

12

Hi Dan,
I think Walter beat me to it but here’s an example of how I’d do this;
https://dl.dropboxusercontent.com/u/795566/test/KJ-test/index.html
and the Freeway 6 Pro file;
https://dl.dropboxusercontent.com/u/795566/test/KJ-test/KJTest.zip

The trick is to make the line height (leading in Freeway speak) of the heading the same height as the container it is in. You won’t see the text vertically align in Freeway but preview the page and the you should get the effect you are after.
Regards,
Tim.
(Not a million miles away from you in sunny south west London)

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

13

Actually after actually reading Walter’s email I think his method is better than my fixed height + line height solution as the Freeway layout is almost perfect with the text pretty much where it should be in the parent box.
Regards,
Tim.

On 30 May 2014, at 17:30, Walter Lee Davis wrote:

Remove the height attribute from the inline DIV containing your headline (set the height to Flexible), or simply cut the headline out of that inner div, delete the inner div, and paste the headline (raw) inline between the two rule divs.

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

14

WOW! Thanks Walter and Tim! I understand where I’m going wrong now!

Just looked at the file you sent through Tim and it all makes sense after looking at your file structure! South West London has just got sunnier!

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

15

I’ll try Walters method first but always good to see how someone with experience sets up their files.

Cheers for your help guys!

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options