Fonts -comparing Firefox and Internet Explorer

[RoseW]

The same font and css style appears quite different when viewed in IE
and compared with Firefox
This template is an example
> http://andreasviklund.com/templates/origo/


I downloaded the Economica font since it wasn't in my list and it is
first in the list in the styelsheet font list and that really doesn't
look the same in both browsers.

The font appears to be true when viewed in Firefox.
Is there a particular routine to accommodate Internet Explorer?

It isn't just this particular font; I'm noticing that font size with em
translates differently in IE.
The result is to have a decent size in a navigation side panel viewed In
IE will have a distinctly smaller font in Firefox. This is using .8 or
.9em. when 100% is part of the body styling and Arial is the first
choice. Using 1em is terriible in IE.

Rose

[Jukka K. Korpela]

2013-01-26 21:36, RoseW wrote:

> The same font and css style appears quite different when viewed in IE
> and compared with Firefox
> This template is an example
>> http://andreasviklund.com/templates/origo/

Please be specific. What exactly is different.

> I downloaded the Economica font

Where did you download it from, and what did you do then?

--
Yucca, http://www.cs.tut.fi/~jkorpela/

[Beauregard T. Shagnasty]

RoseW wrote:

> The same font and css style appears quite different when viewed in IE
> and compared with Firefox This template is an example
>> http://andreasviklund.com/templates/origo/

Perhaps you should start here:

<http://jigsaw.w3.org/css-validator/validator?
profile=css21&warning=0&uri=http%3A%2F%2Fandreasviklund.com%2Ftemplates%
2Forigo%2F>

"Sorry! We found the following errors (191)"

Before you start worrying about how a particular font (that I certainly
don't have, therefore is useless) displays, you should find yourself a
template that works and validates.

In my Firefox, your pages uses Arial, Arial Negreta, and Georgia.

You also have a few HTML errors, and you're using the deceased XHTML
doctype.

--
-bts
-This space for rent, but the price is high

[RoseW]

On 1/26/13 3:11 PM, Jukka K. Korpela wrote:
> 2013-01-26 21:36, RoseW wrote:
>
>> The same font and css style appears quite different when viewed in IE
>> and compared with Firefox
>> This template is an example
>>> http://andreasviklund.com/templates/origo/
>
> Please be specific. What exactly is different.
>
>> I downloaded the Economica font
>
> Where did you download it from, and what did you do then?
>

The font is bigger in Internet Explorer. This shows up in a left
navigation panel set to be 140 or 145px wide. A font with 1em or .9em in
two words will have one word drop below the first. In Firefox these two
words will remain on one line.
> http://www.delmarcottages.ca/directions/directions.html

Internet Explorer-The same words are two lines...cottages under Available
http://www.delmarcottages.ca/directions/directions.html

There isn't a global font size for the Navigation panel. The body font
is 100% Arial Tahoma sans serif
The above pages are based on a template by the same author-andreas viklund

I downloaded his current revision of this style to observe if the
overall appearance was different in the two browsers using his
stylesheet.( So no edits by me)
I noticed he had this Economica font as first tin the list and it
wasn't on my drive so I googled to investigate this font and used the
site inserted below
> http://www.ffonts.net/Economica.font.download
Its an interesting font having a slightly different approach to letters
such as O which, to me had the comparison views be a little more obvious.

I'm on a very wide screen here Lg W2753 so I turned to a regular x223W
Acer monitor on a separate computer. Overall there wasn't much change

I made the delmarcottages for my friend some time ago and she updates it
herself.
I have to admit I did not put much emphasis on viewing the site in
Internet Explorer and only recently did she mention it was her
preference so that is where she will be working and accessing.
She doesn't mind the difference in font appearance when comparing and
she did see the difference.
I mind that there is a difference

If you have a recommendation it would be very much appreciated.
Rose

[RoseW]

On 1/26/13 3:11 PM, Jukka K. Korpela wrote:

> 2013-01-26 21:36, RoseW wrote:
>
>> The same font and css style appears quite different when viewed in IE
>> and compared with Firefox
>> This template is an example
>>> http://andreasviklund.com/templates/origo/
>
> Please be specific. What exactly is different.
>
>> I downloaded the Economica font
>
> Where did you download it from, and what did you do then?
>

I didn't answer your question about the actions on the font.
I unzipped and used Windows 7 font section to have the font be installed.

Rose

[Jukka K. Korpela]

2013-01-26 22:40, RoseW wrote:

>> Please be specific. What exactly is different.
>>
>>> I downloaded the Economica font
>>
>> Where did you download it from, and what did you do then?
>>
>
> The font is bigger in Internet Explorer.

Which font for which text? You are not being specific.

And you did not answer the question about the source of the font.

Please come back when you can disclose relevant facts,

--
Yucca, http://www.cs.tut.fi/~jkorpela/

[dann...@gmail.com]

To RosaW

It'd be a good idea to start your CSS code with

* {
margin: 0;
padding: 0
}

that way you'd avoid discrepancies in different user-agents due to default values on each. This should give you a decent leveled-ground for all spacing wise.

[tlvp]

On Sat, 26 Jan 2013 15:40:10 -0500, RoseW wrote:

> The font is bigger in Internet Explorer. This shows up in a left
> navigation panel set to be 140 or 145px wide. A font with 1em or .9em in
> two words will have one word drop below the first. In Firefox these two
> words will remain on one line.
>> http://www.delmarcottages.ca/directions/directions.html
>
> Internet Explorer-The same words are two lines...cottages under Available
> http://www.delmarcottages.ca/directions/directions.html

Testing on this Vista system in both Safari v. 5 and Firefox v. 18 I see,
between two short horizontal rules, two red words flush left each, one
beneath the other, and then beneath both and flush right, in blue, a pair:

: Available
: Cottages
:: for 2013

I can't tell: is that what you'd have expected?

Cheers, -- tlvp
--
Avant de repondre, jeter la poubelle, SVP.

[Jukka K. Korpela]

2013-01-26 22:49, dann...@gmail.com wrote:

> To RosaW

Thank you for the usual cluelessness indicators.

> It'd be a good idea to start your CSS code with
>
> * {
> margin: 0;
> padding: 0
> }

Snake oil does not sell well today, sorry.

--
Yucca, http://www.cs.tut.fi/~jkorpela/

[RoseW]

I expected that AVAILABLE COTTAGES would be on one line
The year is bumped with <p class="textright">

The owner of the site has been inserting text for each year.
I haven't been 'in' the site code since 2011 or before.
I see she has bumped spaces when she entered text in a paragraph and
knocked off ending tags.
So the validator found <p> errors and a couple of ending tags.....
Some 'encouragement' to use the validator before she uploads.
Unfortunately she only does these edits once a year....like now...and
then I get the 'HELP!!' mails <grin>
Rose

[RoseW]

On 1/26/13 3:30 PM, Beauregard T. Shagnasty wrote:
> Before you start worrying about how a particular font (that I certainly
> don't have, therefore is useless) displays, you should find yourself a
> template that works and validates.
>
> In my Firefox, your pages uses Arial, Arial Negreta, and Georgia.
>
> You also have a few HTML errors, and you're using the deceased XHTML
> doctype.

Actually it was just a quick test viewing that template and curious
about his reference to 'freestyle'
I have used his earlier templates without any issues. Any errors were
usually my own slips or ommissions. Perhaps this 'freestyle' is a little
off the beaten path; certainly looked different to me.

So this template indicated 'Arial, Arial Negreta and Georgia' in your
browser .....how does that happen or are you looking at something else
other than the css stylesheet?
OR are you referring to some other pages when you say 'you're using
decreased XHTML?

Rose

[Beauregard T. Shagnasty]

RoseW wrote:

> On 1/26/13 3:30 PM, Beauregard T. Shagnasty wrote:
>> Before you start worrying about how a particular font (that I certainly
>> don't have, therefore is useless) displays, you should find yourself a
>> template that works and validates.
>>
>> In my Firefox, your pages uses Arial, Arial Negreta, and Georgia.
>>
>> You also have a few HTML errors, and you're using the deceased XHTML
>> doctype.
>
> Actually it was just a quick test viewing that template and curious
> about his reference to 'freestyle'
> I have used his earlier templates without any issues. Any errors were
> usually my own slips or ommissions. Perhaps this 'freestyle' is a little
> off the beaten path; certainly looked different to me.

191 CSS errors is more than a little off.

> So this template indicated 'Arial, Arial Negreta and Georgia' in your
> browser .....how does that happen or are you looking at something else
> other than the css stylesheet?

Firefox menu: Tools > Page Info > the Fonts tab. Or press Ctrl-I.

> OR are you referring to some other pages when you say 'you're using
> decreased XHTML?

Deceased, not decreased. Dead end. Your page of course. It's using an XHTML
Transitional doctype. What are you transitioning from?

[Chris F.A. Johnson]

On 2013-01-26, RoseW wrote:
> On 1/26/13 3:11 PM, Jukka K. Korpela wrote:
>> 2013-01-26 21:36, RoseW wrote:
>>
>>> The same font and css style appears quite different when viewed in IE
>>> and compared with Firefox
>>> This template is an example
>>>> http://andreasviklund.com/templates/origo/
>>
>> Please be specific. What exactly is different.
>>
>>> I downloaded the Economica font
>>
>> Where did you download it from, and what did you do then?
>>
>
> The font is bigger in Internet Explorer. This shows up in a left
> navigation panel set to be 140 or 145px wide. A font with 1em or .9em in
> two words will have one word drop below the first. In Firefox these two
> words will remain on one line.

Not necessarily. See how it appears in my browser (Firefox):

http://b.cfaj.ca/delmarcottages.jpg

--
Chris F.A. Johnson
<http://torontowebdesign.cfaj.ca/>

[RoseW]

These are the recommended doc types

> http://www.w3.org/QA/2002/04/valid-dtd-list.html

The first sample on the page, I interprete to be the declaration of choice

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

or
Is it HTML 4.01 strict?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

Rose

[Jukka K. Korpela]

2013-01-27 0:46, RoseW wrote:

> These are the recommended doc types

Please keep babbling about irrelevant issues, as long as you don't want
to have your problems addressed. This has nothing to do with the crucial
questions: Where did you download the font from, and what did you do
then, and what exactly is the problem you are facing.

Please consider yourself killfiled after your next pointless comment.

--
Yucca, http://www.cs.tut.fi/~jkorpela/

[Danny]

To RoseW

As you can see with an ambiguous query you get 'off the beaten path' answers. It'd be nice if you could provide us with what you mean by 'different looking' with a screenshot of what you get on both browsers, and the relevant page with the code with can look at.

If you initially meant they weren't different just the spacing was different, spacing not being the kerning of the font, the solution of using the global selector and removing any margins/padding, helps to start from a good leveled ground for all browsers, but it seems the issue is different, can't say, so give us what you see and what is being parsed so can assess better.

[RoseW]

My goodness, its not allowed for an explanation of a poster's extra point.?
I didn't know where that poster's mention of the doc type was located
and clarification is out of order?
I did respond to the source of the font download at 3.40 p.m and I did
describe unzipping and having the control panel windows font install
that font.
The Letter O is not the same configuration when both browsers are side
by side in that font.
It was an example of difference in the appearance.

Patience is a virtue.
Rose

[RoseW]

Okay, THAT is bigger than I would expect.
I'll investigate where I can upload side by side screenshots.
Rose

[RoseW]

On 1/26/13 5:27 PM, Chris F.A. Johnson wrote:

http://rwalbum.gogaxdns.com/Browserviews.jpg

Two screen shots put together on one background...
labelled...top one is Firefox, bottom is Internet Explorer
Text sure looks like its taking up more space with Ie to me

Rose

[Chris F.A. Johnson]

If you specified the width in ems instead of px (which I assume
is what you did), the column would adust as necessary.

[RoseW]

Screenshots with both browsers open at the same time at delmarcottages.ca

> http://rwalbum.gogaxdns.com/Browserviews.jpg

Perhaps it is the spacing in the Internet Explorer presentation.

Rose

[RoseW]

The left side column is defined in px (145px) Its only the fonts that
have em.
Perhaps I needed to use the term.'spacing'....that the letters are
spaced differently in IE
I have uploaded what I see as a combined jpg
Rose

[dorayme]

In article <ke1teu$ejm$1...@dont-email.me>,

RoseW <wdm...@hurontel.on.ca> wrote:

>
> http://rwalbum.gogaxdns.com/Browserviews.jpg
>
> Two screen shots put together on one background...
> labelled...top one is Firefox, bottom is Internet Explorer
> Text sure looks like its taking up more space with Ie to me

In all of this, are you au fait with the zoom controls in browsers, on
user options (against which some css is relative to). I assume you
know that not everyone has the same fonts.

It is surely a recipe for great frustration (and destined to fail in
the long run) to be worrying about small differences between browsers.
If your criteria of good design does not include accommodation of
differences, they are too brittle for the business of web design.

--
dorayme

[Chris F.A. Johnson]

Yes it is, because your copy of IE is configured to use a larger
font size.

For some viewers, Firefox (or Chrome, or whatever) may be using a
larger font size.

[Chris F.A. Johnson]

That's the problem.

You cannot know what font size the viewer is using. If you specify
the column width in ems it will expand to fit whatever size of font
is being used. If you specify it in px, it may not be wide enough
(or too wide).

[RoseW]

Yes, I'm aware of zoom controls and viewer preferences I just wondered
how it was that there was a difference on my own computer.

In a post reply above by Chris Johnson the simple answer appears that my

copy of IE is configured to use a larger font size.

Since I never use IE I could say that it is at its default.
The other feature he mentioned is that the navigation panel is fixed
with a px width and the fonts em.
That explanation will do <grin>

My criteria is flexible <LOL!> its the curiosity that kills me.


Rose

[RoseW]

Thanks, both your answers re the fixed panel with px and the fonts being
em and the IE larger font satisfies my curiosity.
I'll have to do some digging to find where the font configuration is in IE

Thanks again
Rose

[Chris F.A. Johnson]

Changing *your* copy of IE will not affect how other people see it.

[RoseW]

I understand this factor 'how other people see it'
I found the text size choices and I just wanted to see how things looked
with the various choices.
Things can get quite ugly <lol!>
Looks like I prefer 'smaller' as the text view choice.
I'll relay the info to the owner of the site. She's not overly concerned.
Rose

[dorayme]

In article <ke2aqf$746$1...@dont-email.me>,

RoseW <wdm...@hurontel.on.ca> wrote:

> I understand this factor 'how other people see it'
> I found the text size choices and I just wanted to see how things looked
> with the various choices.
> Things can get quite ugly <lol!>
> Looks like I prefer 'smaller' as the text view choice.
> I'll relay the info to the owner of the site. She's not overly concerned.

Try tell her to change her normal size in her options to smaller if
she has this problem generally. If not, try to tell her to change her
text size tactically for that site only with here zoom controls.

But in the end, if larger looks ugly with your chosen font, maybe
change to a different font that does not look so ugly bigger. If all
fonts look ugly bigger to you and/or her in your design, then maybe
change the whole layout to see what you can do to make big look cool
(after all, it is known that big can look cool, that it is not out of
the question).

--
dorayme

[tlvp]

On Sat, 26 Jan 2013 19:50:26 -0500, RoseW wrote:

> Screenshots with both browsers open at the same time at delmarcottages.ca
>
>> http://rwalbum.gogaxdns.com/Browserviews.jpg

If you want to keep both words in red together, you might just try this:

Available&nbsp;Cottages<br>

No guarantees it'll do what you want in IE ... but it'll try :-) .

Meanwhile, let me say again that what your IE browser shows is what my
Firefox (v.18) and Safari (v.5) browsers shows, likewise -- what your FF
browser show you never shows up that way in any of my browsers.

HTH. Cheers, -- tlvp

[RoseW]

I just did an experimental try with your suggestion on a copy I have of
her website and it does keep the text on one line however large the view
is in Internet Explorer.
Neat trick!
THANKS!
There is a slight shoving of the info out of the navigation panel but
who cares<LOL!>

Overall my curiosity has been resolved and this bit of info topped it off.

Rose

[Danny]

To RosaW

In delcot.css in line 157 for those <a> elements you have set a width: 125px; and on line 160 you have padding of 1px for right and 5px for left, that leaves you a box of 119px, the element is also inhering a font: 100%, from <body>, so what I'd do is set a 'px' based font-size for them, so they can fit in the 119px. A duct-tape solution will also be to set on them -> white-space: nowrap; That should work so long the text/content doesn't 'bleed' out.

[Beauregard T. Shagnasty]

Danny wrote:

> so what I'd do is set a 'px' based font-size for them, so they can fit
> in the 119px.

That is never a good idea. Use something like font-size: 0.9em; instead.
But of course the best method is to not use px for anything other than for
the exact size of images.

If that box of 125px were sized in em units, there would not be this
problem.

[tlvp]

On Sun, 27 Jan 2013 13:23:02 -0500, RoseW wrote:

... [ Available&nbsp;Cottages<br> ] ...

>
> I just did an experimental try with your suggestion on a copy I have of
> her website and it does keep the text on one line however large the view
> is in Internet Explorer.
> Neat trick!
> THANKS!

> There is a slight shoving of the info out of the navigation panel but ...

Glad it could help you out. I was worried about the line projecting out too
far to the right, perhaps even getting truncated; but, if not, I agree:

> who cares<LOL!>

Glad NonBreakingSPace could be of service. Cheers, --- tlvp

[Felix Miata]

On 2013-01-26 14:36 (GMT-0500) RoseW composed:

> The same font and css style appears quite different when viewed in IE
> and compared with Firefox
> This template is an example
> http://andreasviklund.com/templates/origo/

> I downloaded the Economica font since it wasn't in my list and it is
> first in the list in the styelsheet font list and that really doesn't
> look the same in both browsers.

> The font appears to be true when viewed in Firefox.
> Is there a particular routine to accommodate Internet Explorer?

> It isn't just this particular font; I'm noticing that font size with em
> translates differently in IE.
> The result is to have a decent size in a navigation side panel viewed In
> IE will have a distinctly smaller font in Firefox. This is using .8 or
> .9em. when 100% is part of the body styling and Arial is the first
> choice. Using 1em is terriible in IE.

After reading the whole thread I don't remember seeing mentioned a less than
obvious reason for IE fonts being different from Gecko's.

Gecko's font prefs and default styles are all in px, which are unaffected by
the desktop's display density setting (DPI in WinXP, may be labeled
differently in Vista, 7 &/or 8). IE fonts sizes _are_ affected by that
setting, independently of font sizes chosen either in desktop settings or
directly in IE's text size menu.

The standard (100%, = 96 DPI) setting for many years was always left alone by
computer vendors, probably always left alone by the vast majority of web site
stylists, but occasionally customized by users. With the advent of higher
density laptop displays in the past five or so years, vendors have taken
often to changing this setting to 120 DPI (125%) on products with higher
density screens, which enlarges text and many other objects so as to boost
sales to those who would otherwise avoid the products due to difficulty
reading their tiny text.

I suspect the reason you prefer "smaller" in IE is that you're using a system
with DPI set higher than 100%, most likely 125%, which e.g. makes CSS medium
text in IE 20px instead of 16px.
--
"The wise are known for their understanding, and pleasant
words are persuasive." Proverbs 16:21 (New Living Translation)

Team OS/2 ** Reg. Linux User #211409 ** a11y rocks!

Felix Miata *** http://fm.no-ip.com/