Website text spacing in dreamweaver vs browser

McGraw · 30 Jan 2015 at 09:53

Hi.

I knocked up a website for my partner's business, learning as I went along, a couple of years ago.

It could do with being redone as although it looks (looked) fine online, the layout is a complete mess.

However, I checked it recently and although it still looks fine in ios, the text spacing is now wrong in Firefox and ie which is ruining the layout.

It was definitely fine at some point last year and it looks fine in live view and browser preview.

Any ideas what could have changed to break this?

Thanks a lot.

rwm24 · 30 Jan 2015 at 10:04

What font are you using on the site?

GravyMonster · 30 Jan 2015 at 10:05

It's going to be hard to diagnose without seeing your code, or at least the site.

McGraw · 30 Jan 2015 at 10:15

Thanks.

I'm not sure about the font but I've now realised that one of the pages is showing correctly still.

If duplicating its settings doesn't help I'll post the site.

rwm24 · 30 Jan 2015 at 12:01

McGraw said:
Thanks.

I'm not sure about the font but I've now realised that one of the pages is showing correctly still.

If duplicating its settings doesn't help I'll post the site.

My guess, without seeing the site or code, is the font is slightly different between osx/windows. Try a different font and see what happens.

McGraw · 9 Feb 2015 at 10:30

Thanks very much.

I was looking last night but I've had so much to do I've not had time to sort it.

The busy time of the year is fast approaching and I'd really appreciate some help.

I know the site is a mess and needs png and layout optimisation but for the time being I just need the words to fit in their containers so everything looks right.

Can anyone tell me why the index page is fine but the text spacing is much larger in pages such as "about" and in the tables on the price list?

Www.afternoonteaques.co.uk

Thanks again.

antijoke · 9 Feb 2015 at 10:53

On the index page you have line-height at 19px and the about us page it is set at normal.

McGraw · 9 Feb 2015 at 11:32

anticonscience said:
On the index page you have line-height at 19px and the about us page it is set at normal.

Thank you so much.

macmodder · 10 Feb 2015 at 16:44

I realise your original problem is now fixed, but I strongly recommend that you replace your text images with a webfont. It would be just so much better on so many levels.

Google fonts has a few suitable candidates such as Pinyon Script and Parisienne which are free and easy to use.

McGraw · 13 Feb 2015 at 18:04

macmodder said:
I realise your original problem is now fixed, but I strongly recommend that you replace your text images with a webfont. It would be just so much better on so many levels.

Google fonts has a few suitable candidates such as Pinyon Script and Parisienne which are free and easy to use.

Can you give specifics on why it's so bad to have the text images?

She won't want to change it.

Thanks.

touch · 13 Feb 2015 at 18:45

The images are not computer-readable.
There's many reasons that this is a bad idea:
seo - search crawlers cant read it
accessibility - visually impaired visitors who need to use screen readers won't be able to navigate your site.

Also people who need to use high contrast colour settings or magnified fonts will have difficulty reading the text. (Saying that, i have 20:20 vision and i have difficulty reading it! )

McGraw · 17 Feb 2015 at 11:56

Thanks.

I though I'd done them in a way which meant they were still caught by seo and screen readers.

Yeah the text isn't the easiest to read but as long as she likes it my work is done

macmodder · 19 Feb 2015 at 10:34

touch is right on all counts, but there's also the matter of responsiveness – and not just in the 'works on a mobile' sense. For example, if you wanted to add another element to the navigation for example, with a webfont it would be simply a case of adding the element, whereas with images you need to recreate all your existing navigation items as well as your new one.