Different browsers display different fonts on same page

  • seehowyouare
  • Novice
  • Novice
  • seehowyouare
  • Posts: 24

Post 3+ Months Ago

Hi all, I am the clueless newbie webmaster for http://www.ddsap.com :oops:

We had a company create our website and it's OK. I noticed that when I use XP & IE the fonts look fine but when I use XP & Mozilla or Netscape on the same page the fonts are Times Roman or some such thing. Using different browsers under Linux displays a number of different fonts.
I looked at the source page and it seems to waffle on about IE a lot. I am going throught the CSS intro at http://www.w3schools.com/css/css_intro.asp but thought it wise to ask before I consider changing anything on the web site.

I want the page to display the same fonts or at least look similar on different browser types.

What controls the fonts ?

The browser or the web page ?

TIA
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • seehowyouare
  • Novice
  • Novice
  • seehowyouare
  • Posts: 24

Post 3+ Months Ago

Seems like the Style sheet controls them. I tested by using http://www.w3schools.com/css/demo_default.htm in IE and Mozilla on Windows and the pages look identical to me.
  • diverdan
  • Beginner
  • Beginner
  • diverdan
  • Posts: 46
  • Loc: Alabama, USA

Post 3+ Months Ago

the fonts a user has on his/her machine & the browser determine what is displayed

http://www.ozzu.com/ftopic23701.html <-- musik made a list
  • seehowyouare
  • Novice
  • Novice
  • seehowyouare
  • Posts: 24

Post 3+ Months Ago

diverdan wrote:
the fonts a user has on his/her machine & the browser determine what is displayed


So what do I need to change on the website to get the fonts to look uniform between browsers ?

On my XP laptop I use Mozilla and IE 6 however the fonts on my home page display differently with each browser. You can see a 100kb screenshot here - http://users.tpg.com.au/ddsaadsl/2browsers_2fonts.gif
  • rtm223
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 1855
  • Loc: Uk

Post 3+ Months Ago

That upsets me that people claim to do a professional job, and then go do it half cocked. I also had a look through the source and it's pretty icky too.

best bet is to try this:

Code: [ Select ]
body{
  font-family:Verdana, Arial, Helvetica, sans-serif;
}
  1. body{
  2.   font-family:Verdana, Arial, Helvetica, sans-serif;
  3. }


in the main css file. This will use Verdana, then if verdana cannot be found, arial etc. At last resort this will use a generic sans-serif font.

This of course assumes that there are no <font> tags in the body and there are no inline styles that set the font, as these will override the code above.

Try it see what happens.
  • JrzyCrim
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 2062

Post 3+ Months Ago

What company did this web page? It's terrible. The navigation links at the top are all images. Simple text and css could have been used. There is absolutely no css at all. There are no font tags either, (which is good, really). No particular font is defined at all so it's left up to the user's browser. That's not a bad thing necessarily. rtm223's css rule will mostly take care of the problem of seeing the same font. Trying to control what font is displayed absolutely is pretty much a waste of time. Not all users have the same fonts installed. Everyone doesn't necessarily like the same fonts. It's best to include generic font families. As far as verdana goes, I won't get into that here. I'll offer a link though: :lol:

http://www.xs4all.nl/~sbpoley/webmatters/verdana.html

On every page, the <title> ..</title> is at the top of the page. This needs to be inside the head section of the document. What does need to be at the top is a !DOCTYPE. At this point, it doesn't really matter because it wouldn't validate anyway.

I think it would be a waste of time to try and fix this site. I would recommend starting over; transfer the relative content to a new and better layout. Use html for content mark-up. Use CSS for presentation/layout. I suppose this is not an option for you right now but here are a couple of good html and css tutorials. As you learn, maybe you can slowly redesign this site.

http://tranchant.plus.com/web/html-start

http://www.htmlhelp.com/reference/css/quick-tutorial.html

Various links and resources

Good luck!

Edit: hee hee, I thought I was on the website review forum! I'll let it stand, though.
  • rtm223
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 1855
  • Loc: Uk

Post 3+ Months Ago

Interesting point about verdana there - I wasn't aware of that!
I'm starting to design my pages so that the font size akes no difference and the layout still holds with the text zoom functions on and stuff like that for accessibillity, so it really shouldn'y matter for me lol. So remove the verdana from the original post and start with just arial.

To be honest I would agree with JrzyCrim about doing a redesign, it's unfourtunate for your company but there are cowboys in this industry as with any other.

Are you willing to disclose how much the company was paid and what company it is. I'm just curious.
  • seehowyouare
  • Novice
  • Novice
  • seehowyouare
  • Posts: 24

Post 3+ Months Ago

Reactive media In Melbourne Victoria Australia did the website.

We were very inexperienced in web stuff and didn't really know what we wanted from our website so I just looked at it from a tech point of view.
It was a mess up from the start. I wanted plain old HTML, so I could run it/host it anywhere and run it through the validators so i could at least check something. Instead I got ASP which no-one at my work knows how to write and we have been stuck with it ever since.
The images are not nice at all but AFTER the website was ready (?) we were told more money was needed for images. I just threw my hands up and said "No more !, no more money, no more time, just give me the damn pages and I'll take of the darn thing from there"
From the start things just didn't work, I had to scour the net to get the right SQL syntax so the home page didn't display ALL the news items, just the last 120 days, I had to find and add the stuff necessary to send emails from the web site (feedback forms) etc etc. It was a painful experience and not one I am keen to repeat or get involved in at all again, hence my baby step questions... How do I get the fonts to look the same ?

I don't know about the coding etc etc but , to be fair to the web designers, the client (that's me) didn't have a firm plan for the web site or a firm design - just ideas, links to sites we liked, fonts we liked, we posted colour samples and our brochures etc to try to give them an idea of what we wanted. Perhaps their regular clients tell them exactly what they want, what images etc etc. We were not an experienced customer ... Reactive Media did return a website we can live with, not one we particularly like nor one we can grow with but hey, it was better than what we had at the time - which was nothing ...
And the price ? - not cheap .....
  • seehowyouare
  • Novice
  • Novice
  • seehowyouare
  • Posts: 24

Post 3+ Months Ago

Thanks for the impromptu review of our website. I'll take your word for it on the tech side of things (css etc). About the Verdana thing , I read the link you supplied and can't say I agree entirely with the authors statements.

>> Note how much bigger Verdana is than the others, even though the point size is the same. This is particularly so in comparison to Times New Roman, which is a common browser default font.

I'd rather shoot my dog that have Times Roman as a font on my web page and I like my dog, a lot ! I'd have verdana over Times Roman anyday. Times Roman is what made me start surfing to find a solution for icky fonts in the first place. Perhaps i misunderstood Did the author mean specify any other font (eg: Arial, Helvetica or some such) instead of Verdana because of the sizing issues ?

>> Set the font in your own browser to what you find pleasantly readable, and leave your readers to do the same in their browsers.

I have NEVER set the font in my browser, ever and I am no computer newbie.

BTW I will change the CSS tomorrow...
  • rtm223
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 1855
  • Loc: Uk

Post 3+ Months Ago

To be fair on you, the designers should be able to come up with something from a basic brief, and should work with you. The whole point of web designer is to create a website for people who don't know how.

I had a little looksy at their site and even their own site is several years out of date technically (not a stylesheet to be seen!). And it took like 20 seconds to load on broadband! looks to me like they do flash/multimedia stuff for the most part and don't really care about html, the backbone of the internet.

They also work for some really big clients. My guess is that they knew they could screw you over because of your lack of knowledge.

Let me know if that css works if not I'll try again
  • JrzyCrim
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 2062

Post 3+ Months Ago

seehowyouare wrote:
Thanks for the impromptu review of our website. I'll take your word for it on the tech side of things (css etc). About the Verdana thing , I read the link you supplied and can't say I agree entirely with the authors statements.


No problem. It's not a major issue. That's why I didn't really get into the whole verdana debacle. I just know from experience that a lot of people hate verdana.

Quote:
I'd rather shoot my dog that have Times Roman as a font on my web page and I like my dog, a lot ! I'd have verdana over Times Roman anyday. Times Roman is what made me start surfing to find a solution for icky fonts in the first place. Perhaps i misunderstood Did the author mean specify any other font (eg: Arial, Helvetica or some such) instead of Verdana because of the sizing issues ?


I hear you. Times New Roman is not my first choice for a font either. They were just using Times New Roman as an example to compare relative sizes.

Quote:
I have NEVER set the font in my browser, ever and I am no computer newbie.


You may have chosen not to set your own font, but by default, they are set to something. In the case of firefox, Times New Roman is one of the defaults. I know you hate that font. :lol: You should pick a font you like. So, when you come across a web page that doesn't have a particular font declared or just a generic font family (sans-serif, serif), you won't see that ugly font.

Good Luck with the site...
  • conorific
  • Proficient
  • Proficient
  • User avatar
  • Posts: 350
  • Loc: NY

Post 3+ Months Ago

I'm sorry to hear that. Thta's really ridiculous for a company to screw you over like that, my condolences.
  • seehowyouare
  • Novice
  • Novice
  • seehowyouare
  • Posts: 24

Post 3+ Months Ago

Hi rtm233, I have checked the css files and there are 2 of these
http://www.ddsap.com/ssi/styles_lrg.css and
http://www.ddsap.com/ssi/styles_sm.css
The fonts setting you suggested seem to already be in these style sheets so I think the issue is that the home page (?) never tries to detect what type of browser is trying to view the website. the whole site seems to be made for IE, no other browsers considered.
How can I add new browser definitions (?) to the source ?

Thanks for your help
  • JrzyCrim
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 2062

Post 3+ Months Ago

Hello,

The script, http://www.ddsap.com/ssi/js_styles.js, is used to determine the browser a particular user has. It applies either styles_sm.css or styles_lrg.css.

I missed this during the first look at your code.
Code: [ Select ]
<!---detects whether to use Mac or PC stylesheet-->
<SCRIPT LANGUAGE="JavaScript" src="/ssi/js_styles.js"></SCRIPT>
  1. <!---detects whether to use Mac or PC stylesheet-->
  2. <SCRIPT LANGUAGE="JavaScript" src="/ssi/js_styles.js"></SCRIPT>


The above code is near the top of each of your html pages. It appears everything is in place. The html calls the javascript which decides what browser is being used and links the appropriate stylesheet.

Which version of netscape were you using? The script is supposed to detect NS6, NS4, IE4 for mac and windows.

You could remove the javascript call and place this in the head of your homepage:
Code: [ Select ]
<link rel="stylesheet" href="/ssi/styles_sm.css" type="text/css">


If this solves your problem on the home page, then you can do the same on the rest of the pages for your site. This would have the added benefit of working if javascript is disabled.

Both stylesheets are virtually identical except for a 1px difference on most of the font sizes. lol, they went to a lot of trouble just for a 1 pixel difference.

don't remove the rollover_code.js script.

Hope this helps...
  • seehowyouare
  • Novice
  • Novice
  • seehowyouare
  • Posts: 24

Post 3+ Months Ago

Hi JrzyCrm and thanks for the reply

JrzyCrim wrote:
Hello,
Which version of netscape were you using? The script is supposed to detect NS6, NS4, IE4 for mac and windows.


I am using Firefox .08 which I assume is the same as Netscape 7 ?

I'll make the changes and test. from Mozilla on my XP laptop and also from another XP lapptop we have running Netscape 7.0

Thanks again...
  • JrzyCrim
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 2062

Post 3+ Months Ago

8) Cool, I wasn't sure if you were using mozilla and netscape browsers seperately. That script just isn't detecting firefox as netscape, apparently.

mozilla/netscape 6,7/firefox all use the gecko rendering engine.

Good luck.
  • seehowyouare
  • Novice
  • Novice
  • seehowyouare
  • Posts: 24

Post 3+ Months Ago

Okey dokey ! Thunderbirds are go !

>> The above code is near the top of each of your html pages.

I found this text only in header.asp so I changed it as you suggested. I made the one change and now all the pages look the same in Mozilla and IE ! Tres funky..

Thanks JrzyCrim and rtm223 :D
  • JrzyCrim
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 2062

Post 3+ Months Ago

Your welcome!

Ah, I see. That code is being written to each page at the server as they are being delivered. If you view the source from within your browser, you'll see it. :) That's great you didn't have to change every page. I never really fooled around with server side includes and such so I didn't even consider that. Should have since the scripts were in the SSI directory. :?

Glad you got it working.

Post Information

  • Total Posts in this topic: 18 posts
  • Users browsing this forum: No registered users and 34 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.