Welcome to the Geeks & God Static Archive. Read more »

Font Online Larger Than Localhost

Joined: 11/28/2008

This is very odd... wondering if someone can help me explain this.

When I serve the *exact same code* locally, I get one font size... when I serve it from a remote host, I get a different font size. The changes are subtle, but attached is a picture. [attachment=93:grab.tiff]

The top part is when viewing it on "localhost" and the bottom is from my dev server.

I have tried defining the fonts as both px and pt in the CSS. Again--this is the exact same code.

Any thoughts would be appreciated!
Luke

edit
removed the attachment... image is now viewable here:
http://m.lukewertz.com/image.tiff

Thanks!!

--
iLuke

Joined: 11/28/2008
It would be more beneficial

It would be more beneficial for me to see the source in question, but I figure it has to do with difficulty getting to external declarations.

Joined: 11/28/2008
Jim, have a look

Jim, have a look here:

link removed

Thanks
-L

--
iLuke

Joined: 11/28/2008
These forums are useless when

These forums are useless when it comes to attachments.

I wouldn't recommend you to use points for screen, you should know that points (pt) is a print unit, and is not practical to use for screen layout, the differences can be huge cross-platform, as the different platforms calculate the DPI in almost each their own way. A common problem is viewing websites designed to be viewed on windows in linux.

Also i would recommend to move away from the pixel based units, and simply learn to work with ems for font-sizes. There might be some smaller differences cross-platform, those differences shouldn't however break your layout if done right.

An example which would work, is to define a width using percentages, and then use min-width and max-width with pixels to apply some control, and make room for the bigger text.

It doesn't make any sense that there would be a difference when you view the site remotely, only if done on a different platform. Generally browsers deal nicely with font-sizes, but there might be some smaller differences as well.

Perhaps the DPI on your remote computer is different?

I would also suggest you get rid of the Flash menu at the top, same effects can easily be done by using CSS alone.

Brugbart - Tutorials on Design and Programming

My Blog

Joined: 11/28/2008
Thanks for the helpful info,

Thanks for the helpful info, BlueBoden!

I am trying to troubleshoot this specific issue with the font rendering--the advice to move to completely em based layout is very good advice. I agree with you 100% on that.

As for the flash menu--it's just sIFR. The menu degrades nicely and the reason for the flash isn't the effect--it's the font /smile.gif" style="vertical-align:middle" emoid=":)" border="0" alt="smile.gif" />

Back to the rendering issue--as you can see if you download the attachment in the first post--I'm rending the pages on the same system. BlueBoden's reminder that pt and px are system dependent is helpful, though not really related to this since the calculation is done on the client side (if it was done on the server side, then there would be no differences cross-platform--and wouldn't that be a happy world to live in?!) /smile.gif" style="vertical-align:middle" emoid=":)" border="0" alt="smile.gif" /> At this point, I'm mostly just puzzled by it--if no one as any thoughts, I might take the issue to Sitepoint or somewhere where there is more feedback available. As I said, I'm mostly just curious now /smile.gif" style="vertical-align:middle" emoid=":)" border="0" alt="smile.gif" />

Thanks!
Luke

--
iLuke

Joined: 11/28/2008
Is it just me, but I get an

Is it just me, but I get an error message if I try to access the attachment.

Cheamweb Your window into the Fraser Valley
Dave's Journey | The Macfoto Life

Joined: 11/28/2008
Not just you - I think only

Not just you - I think only Admins can view that attachment /smile.gif" style="vertical-align:middle" emoid=":)" border="0" alt="smile.gif" />

But I don't know the answer to the question anyway!

~Andrew~

Joined: 11/28/2008
Nexonen @ Nov 10 2008,
QUOTE(Nexonen @ Nov 10 2008, 01:33 PM)
Not just you - I think only Admins can view that attachment /smile.gif" style="vertical-align:middle" emoid=":)" border="0" alt="smile.gif" />

But I don't know the answer to the question anyway!

oops... i'll host the image elsewhere! sorry about that, guys!

edit
image is now accessible here: http://m.lukewertz.com/image.tiff

--
iLuke

Joined: 11/28/2008
What browser are you using? I

What browser are you using? I did have a thought a few days ago but dismissed it as probably not being the answer. But I may as well try - could you have accidentally reduced the size with the browser "View -> Text Size" equivalent, and the browser remember this setting on the address you changed it on - but not apply to the other one? I doubt it is, but it's all I have.

~Andrew~

Joined: 11/28/2008
Good thought! Tomorrow when

Good thought! Tomorrow when I'm at work, I'll check since the screenshots were taken there. They were both taken in FF3, for the record /smile.gif" style="vertical-align:middle" emoid=":)" border="0" alt="smile.gif" />

--
iLuke

Joined: 11/28/2008
I am using FF3 x64 and I see

I am using FF3 x64 and I see it like the top half of your screenshot. Luke, have you looked at it with Firebug to see if there is a discrepancy in the CSS being worked out? (Looking at the "Show Computed Style" version will show you the actual font size in action, and you could then track it up the tree). Are you also certain that it isn't a caching issue?

Paul Davey
Whitford Church
"Everyone who calls on the name of the Lord will be saved." Romans 10:13
"For all have sinned and fall short of the glory of God, and are justified

Joined: 11/28/2008
Its the same for me, when i

Its the same for me, when i view the site in FF3. I view it as the top part of your image.

If you are on the same OS, with the same DPI settings, then you should check if theres some user defined stylesheet applied as well, its unlikely. But you never know with computers at work.

Brugbart - Tutorials on Design and Programming

My Blog