Click to See Complete Forum and Search --> : fonts in css html


kireol
07-16-2008, 03:01 AM
I know it's not really a PHP question, so please be easy on me. This community seems to be one of the best around and I figured someone here would know.

I was developing a web site locally on my windows PC running XAMPP.

I got all of my scripts running well! I have it to the point where I decided to purchase the domain name, link my existing 1and1.com account for the server to the domain, and upload all of my scripts/files/images/etc.

For some reason, when I view it on the actual domain(not locally), it looks entirely different from my local windows/xampp copy. My page is way stretched(margins screwed with), and all of the fonts look different.

I think that I learned something and need a suggestion or fix for it.

Based off of what I'm seeing, I'm assuming when you use commands like "font-family:Arial;" that it uses some font from the server the script resides on? I also use "font-family:Arial, Helvetica, sans-serif;"

I've never ran into this before, and I figured someone here would know the answer.

I'm seeing the same results in Firefox and IE.


thanks!

NogDog
07-16-2008, 03:15 AM
Your browser reads the font-family names listed for that CSS parameter from left to right until it finds one it supports. If it does not have any of the named fonts, then it will use its default font for the generic font family if provided (e.g. sans-serif). If no valid generic font is provided and the browser does not have any of the named fonts listed, then it will default either to the font used in the containing element (if any), or else the browser's default font when all else fails.

So, assuming you were testing with the same browser on the same computer in both instances (local and on the live server), one would think something else must have changed, as there should be no difference in which fonts are available for the browser. As to what the actual problem is, I can't say at this point. If using Firefox, if you have the Web Developer add-on (https://addons.mozilla.org/en-US/firefox/addon/60) you can check the error console for CSS errors, and also run the page through the HTML and CSS validators to see if there is some syntax error messing things up for you.

kireol
07-16-2008, 04:40 AM
Thank you for the response.

I downloaded the web developer add-on you suggested. No errors. 1 warning about "_height", which is for IE compliance.

I checked the site for HTML validation http://validator.w3.org/check?uri=http%3A%2F%2Fwww.loanmodassistant.com%2F&charset=%28detect+automatically%29&doctype=Inline&group=0 and made a couple changes and "found to be valid XHTML 1.0 Strict."

I uploaded my entire site again thinking maybe I missed something.

Fonts are still different.

This is weird! I've never seen this before.

I can deal with the fonts being different although I'd like to know why.

The bigger problem is I can't figure out why the page is "stretched" on live(you can see on the right where it should end based off of the space between the grey box and the right margin), and not on development local box. It's the exact same code!

http://www.loanmodassistant.com/

NogDog
07-16-2008, 05:12 AM
Check out your /header.css file - it looks like it contains HTML instead of CSS?

kireol
07-16-2008, 01:38 PM
Good job NogDog!

I forgot to FTP it over! When I FTPd, I sorted based off of date, and that header is an old file.


wow man, thought I was going nuts last night!

Ever see that seinfeld episode where Elane uses a lot of exclamation points in her brochure ad? that's how I feel right now! But I'm excited it's fixed! lol!

thanks