Font size difference on localhost vs. actual server

  • (2 Pages)
  • +
  • 1
  • 2

23 Replies - 12161 Views - Last Post: 09 August 2010 - 02:31 AM

#1 Ohio66  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 13
  • Joined: 10-April 09

Font size difference on localhost vs. actual server

Post icon  Posted 10 April 2009 - 11:36 AM

I develop my web site using IIS running on my own computer and then upload it to the actual server. I don't understand what accounts for the drastic font size differences when the site is running on my computer vs. the server.

I normally use Firefox as my browser, but I also have IE7 and Google Chrome. The same font size differences occur in all three browsers.

Let's say I am running Firefox and viewing my web site which is located on my computer (http://localhost/). All of the font sizes look just right. Now when I upload it to the real server and open it in the same instance of Firefox, the fonts are all two to three times larger.

Can anyone explain to me how this happens and how I can fix it? I have tried using a css file and also embedding the style into the pages, but same result both ways.

Is This A Good Question/Topic? 0
  • +

Replies To: Font size difference on localhost vs. actual server

#2 gregwhitworth  Icon User is offline

  • Tired.
  • member icon

Reputation: 220
  • View blog
  • Posts: 1,604
  • Joined: 20-January 09

Re: Font size difference on localhost vs. actual server

Posted 10 April 2009 - 01:33 PM

Yep - that doesn't make much sense. Could you post some code so I can make sure that nothing is overriding anything else.

--

Greg
Was This Post Helpful? 0
  • +
  • -

#3 Ohio66  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 13
  • Joined: 10-April 09

Re: Font size difference on localhost vs. actual server

Posted 10 April 2009 - 04:21 PM

The HTML file:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<head>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
<title>My Page Title</title>
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
<link rel="stylesheet" type="text/css" href="/css/default.css">
</head>

<hr>
<table>
	<tr>
		<td><a href="/default.asp"><img src="/favicon.jpg" alt="Home"></a></td>
		<td class="episode_title_td">Episode Title</td>
		<td class="episode_location_td">Episode Location</td>
	</tr>
</table>				

<hr>
<table>
	<tr>
		<td class="image_td_528">This text is different on IE & Firefox</td>
		<td><div style="overflow:auto">This text is different on IE & Firefox</div></td>
	</tr>
</table>



The CSS file:
body 
{ 
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: 1.2em;
	color: black;
	background-color: #eeffee;
 }

.episode_title_td { font-size: 1.75em; font-style: italic; text-align: center; vertical-align: bottom; }
.episode_location_td { font-size: 1.2em; font-style: italic; text-align: center; vertical-align: bottom; }

.image_td_528 { width: 528px; }
.image_td_272 { width: 272px; }


Was This Post Helpful? 0
  • +
  • -

#4 gregwhitworth  Icon User is offline

  • Tired.
  • member icon

Reputation: 220
  • View blog
  • Posts: 1,604
  • Joined: 20-January 09

Re: Font size difference on localhost vs. actual server

Posted 10 April 2009 - 04:38 PM

Have you tried using pixels for troubleshooting - em's can be a pain sometimes. They are better for elasticity - but just to troubleshoot - set it to a pixel (fixed) size.

Let me know.

--

Greg
Was This Post Helpful? 0
  • +
  • -

#5 Ohio66  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 13
  • Joined: 10-April 09

Re: Font size difference on localhost vs. actual server

Posted 10 April 2009 - 05:44 PM

I can try pixels (probably won't get to it until tomorrow) but what I don't understand is why the same browser interprets the size differently depending on where the html and css files are located.

Doesn't the browser load the css file and calculate the size? Why would it be different if the css file was loaded from IIS on my local computer or a real server running Unix?
Was This Post Helpful? 0
  • +
  • -

#6 gregwhitworth  Icon User is offline

  • Tired.
  • member icon

Reputation: 220
  • View blog
  • Posts: 1,604
  • Joined: 20-January 09

Re: Font size difference on localhost vs. actual server

Posted 10 April 2009 - 10:33 PM

A quick google search and I don't see anything that suggests this could happen, nor in the 13 years of being in the industry have I had that happen.

Also did you know you could easily get rid of the 'hr' in there by doing the following:


table td.last {
	 border-bottom: 1px solid grey;}

HTML SECTION

<table>
	<tr>
	  <td class="last">
	</tr>
</table>






ALSO - have you made sure that you hit ctrl+0 in your FF browser to make sure that the font settings are at normal for your browser??

This post has been edited by gregwhitworth: 10 April 2009 - 10:35 PM

Was This Post Helpful? 1
  • +
  • -

#7 sl4ck3r  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 11
  • View blog
  • Posts: 285
  • Joined: 22-September 07

Re: Font size difference on localhost vs. actual server

Posted 10 April 2009 - 11:06 PM

id agree with this not really happening unless the code is different or youre using different browsers.
Was This Post Helpful? 0
  • +
  • -

#8 Ohio66  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 13
  • Joined: 10-April 09

Re: Font size difference on localhost vs. actual server

Posted 11 April 2009 - 10:23 AM

Pixels do work much better than ems but I wish I knew why - and I also wish I knew why the result is still not perfect. When I place IE and FF side bye side it's clear that IE is rendering the text larger and bolder than FF. And yes, I have made sure that I am using default size in each browser.

When I go to just about any other web site and compare IE and FF they are both essentially the same. I may look into this further sometime in the future but I got other things to figure out for now.
Was This Post Helpful? 0
  • +
  • -

#9 gregwhitworth  Icon User is offline

  • Tired.
  • member icon

Reputation: 220
  • View blog
  • Posts: 1,604
  • Joined: 20-January 09

Re: Font size difference on localhost vs. actual server

Posted 11 April 2009 - 07:24 PM

Well I'm glad to hear that you found something to resolve. If you don't understand how to use em's they can be troublesome, they work as follows:

Let say you set the global HTML font-size to 1em, NOW EVERYTHING that is a font is now 1 em (which is about 13px high).

So when you say that you want your paragraph fonts to be 2em this actually means 13px plus 10. If you wanted something around 15 you need to do 1.2 (roughly - em's don't equate over to pixels well - I'm just estimating)

Anyways, it has a waterfall effect - and it is great for liquid sites.

Anyways, IE will render all text differently than the other browsers as it is currently a stand-alone engine (meaning that they are the only ones not using a Webkit renderer). Anyways, keep us informed if you find anything that would be useful in this.

--

Greg
Was This Post Helpful? 0
  • +
  • -

#10 Ohio66  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 13
  • Joined: 10-April 09

Re: Font size difference on localhost vs. actual server

Posted 12 April 2009 - 09:24 AM

OK, I simply don't understand what's going on here. This is a screen shot of a test page running on on my computer (IIS localhost). This is exactly how I see it in my browser (Firefox 3.0.8 - latest version):

Posted Image

The css classes are shown for each of the two sizes of text shown.

Now this is exactly the same page and css file when moved to the actual server which is running Unix - but if my understanding is correct, that should have nothing to do with the different sizes as my browser loads the css file and does the sizing:

Posted Image

These two images were captured from the same instance of Firefox. I could actually toggle back and forth between them by hitting the back and forward buttons.

Here's a link to the page if you want to see it in your browser:

Ohio66 Debug Page

And here are links to the jpg images shown above:

localhost jpg
server jpg

Can anyone explain what is happening?
Was This Post Helpful? 0
  • +
  • -

#11 gregwhitworth  Icon User is offline

  • Tired.
  • member icon

Reputation: 220
  • View blog
  • Posts: 1,604
  • Joined: 20-January 09

Re: Font size difference on localhost vs. actual server

Posted 12 April 2009 - 10:54 PM

All I know is this:

It looks fine on my end - so I KNOW that it isn't the server doing it.

Are you looking at this ON the server (remoting in)?
It can't be a FF issue as you can see it fine on one, but not the other.

I am truly stumped. I see why you are frustrated with this. I would like you to know though - that it checks out fine on mine.

The only thing I can think of trying is swapping out your doctype.
Was This Post Helpful? 0
  • +
  • -

#12 gregwhitworth  Icon User is offline

  • Tired.
  • member icon

Reputation: 220
  • View blog
  • Posts: 1,604
  • Joined: 20-January 09

Re: Font size difference on localhost vs. actual server

Posted 12 April 2009 - 11:02 PM

Also, the only other thing that stands out to me is that you are using Active Server Pages extension - have you tried just plain HTML and see if there's a difference. I know that the meat of the code is HTML but what if that extension is bugging' IIS for some reason. Just a thought.
Was This Post Helpful? 0
  • +
  • -

#13 TechWar  Icon User is offline

  • D.I.C Regular

Reputation: 7
  • View blog
  • Posts: 470
  • Joined: 17-February 09

Re: Font size difference on localhost vs. actual server

Posted 13 April 2009 - 02:28 PM

You said you are running IIS, but your webserver is Unix(apache?) There can sometimes be a difference.
If your running a MS font - that won't be on a *ix server.
OR
could be the .asp extension on a *ix host.....

Try a different font or extension and see if it helps.
Might / Might not. can't hurt.

This post has been edited by TechWar: 13 April 2009 - 02:30 PM

Was This Post Helpful? 0
  • +
  • -

#14 Ohio66  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 13
  • Joined: 10-April 09

Re: Font size difference on localhost vs. actual server

Posted 13 April 2009 - 03:21 PM

I just created an html file that presents exactly the same page to the browser and there is no change. It still displays one way on my computer and another way on the real server.

Now I'm not so sure which one is right. Since I design my page by visually examining it while running on my computer I always assume it's right. But I just realized that it may be the other way around. Obviously, if both are display 17px text and the sizes are radically different then one is right and one is wrong (or at least one is more right than the other). I now suspect that when running on the real server the sizes are closer to 13px and 17px than they are when running on my computer.

But I still really want to get to the bottom of this and find out why it happens. I am not an expert at all, but I thought that fonts were rendered in the browser rather than on the server. Am I wrong about that? How could the server possibly affect font rendering for simple html/css code like this? It is my understanding that the browser loads both the html and css files and takes over from there with the rendering.

A question for anyone who clicks on my debug page link above - which attached jpg image above does it more closely resemble? Do you think that, on your browser, it looks like text at 13px and 17px?
Was This Post Helpful? 0
  • +
  • -

#15 sl4ck3r  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 11
  • View blog
  • Posts: 285
  • Joined: 22-September 07

Re: Font size difference on localhost vs. actual server

Posted 13 April 2009 - 04:39 PM

your server probably doesnt understand asp pages. do you have mono installed? .asp is generaly ran from a MS server, not *nix. Also press cntrl 0 when view both pages. this resets back to default browser font size
Was This Post Helpful? 0
  • +
  • -

  • (2 Pages)
  • +
  • 1
  • 2