• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 203
  • Last Modified:

IE doesn't see <span> command correctly regarding fonts

I have been working on a website for a friend and have had several people check it for me. 3 of the more than 15 computers we have viewed it on are showing inconsistency in the fonts. After looking into it, I have determine that the problem came from text that I copied from e mail's sent to me by the site's owner.

On most of the site I used this:

<font face="Trebuchet MS" size="2" color="#470498">

But where I copied and pasted from her e mails, it put this in:

<span style="font-size: 10.0pt; font-family: Trebuchet MS">

What I need to know is WHY that made the font larger in places on these three people's computers. On all the rest, the font looks perfectly consistent.  We all are using IE6 so why does it appear different on theirs? Is there something in Tools/Internet Options that they don't have checked? Or an upgrade that was not installed?

Am I going to have to go back on every single page on the site and remove that span style code so that this doesn't happen to other viewers?

Thanks in advance!

Mary
0
msalvail
Asked:
msalvail
  • 5
  • 4
  • 2
  • +3
2 Solutions
 
php-webdesignCommented:
don't know what could cause this problem,

but no designer works with font tags anymore, think you need to read some about CSS
0
 
rivusglobalCommented:
If you're not opposed to using CSS, I wouldn't mind helping you develop some code that will do the trick.

Post up some links to your current HTML so we can take a closer look at your project.

Regards,

Owen
0
 
eyeh8uCommented:
<font face="Trebuchet MS" size="2" color="#470498">

'2' here is relative to the users display font, and the users font display settings in Internet Explorer. 2 allows it to scale if a user changes their font size settings, or if their windows display settings have a different base size for screen fonts etc.

<span style="font-size: 10.0pt; font-family: Trebuchet MS">

This on the other hand has a specific 10.0pt size. 10point is 10point. It isn't relative and won't be scaled by settings.

AS mentioned above by php-webdesign and rivusglobal, (sort of) <font> is deprecated really, you should be using span with css, or css on your other attributes to get a consistent rendered design. Try the tutorials at w3schools.com.

To fix it consistently, you could add a CSS Definition for the body of your site, and the <p> tag, or whatever else your main html is nested in:

<style type="text/css">
<!--
body {
font-family: Trebuchet MS;
font-size: 10pt;
color: #470498;
}
p {
font-family: Trebuchet MS;
font-size: 10pt;
color: #470498;
}
//-->
</style>

Then your need for the <font> tag and the <span> tags might go away. Bit of a pain to have to fix your entire site, but, it'll render consistently.

I could perhaps provide a specific example if you have a URL I can look at?
0
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
LeviterCommented:
In the first tag you stated the font-size to 2. This is a relative size to the base font size. When people set their browser to display all text to e.g. 'smallest' (in IE this is in the 'view' menu) it is still relative.

When you use CSS and say that the font size if 10 pixels high, it is not relative and the font is displayed in 10 pixels (no matter what the user has set their font size in the browser to).

So my first guess is to look in the 'View' menu .... option 'Text size' and see what it is set to with all the users... It could be that there lies the 'problem'.

BTW. In HTML 4.0 the SIZE attribute of the FONT tag is deprecated, so using style sheets is the way to go for the future.  :-)
0
 
msalvailAuthor Commented:
Thanks for all of your replies; I really appreciate it.

I am reading up on CSS...I guess my 'problem' is that I use MS Frontpage and while I know how to edit html, I certainly don't know how to write anything from scratch. (and yes, I know it bloats the code) I work another job 10 hours a day and this is just a hobby of sorts. BUT, I do want to learn and I have invested a lot of time in this site and don't want to put it up until it is all correct. The owner has not publicized the URL so it still is sort of 'hidden'.

If I put

<style type="text/css">
<!--
body {
font-family: Trebuchet MS;
font-size: 10pt;
color: #470498;
}
p {
font-family: Trebuchet MS;
font-size: 10pt;
color: #470498;
}
//-->
</style>

on each page, do you think it will override the problem? Does this go it its entirety at the top of the page or exactly where would I put it?

While I understand what several of you have said about the individuals having different Windows font settings and thus a font size of '2' renders differently on their PCs, I don't see why it is consistent on every other computer and that the two font commands...10.0 and 2, don't clash on our computers.

The site is in frames but here are the direct links to some examples:

http://www.lotekipapillons.com/ch/supernaturalbeing.html

http://www.lotekipapillons.com/per/suddenimpulse2.html

Both of these pages have the span command in 2 places and so the font is inconsistently rendered on some computers.
---------------------------------------------
http://www.lotekipapillons.com/ch/seeingred.html

On this page, I removed the <span style="font-size: 10.0pt; font-family: Trebuchet MS">
and the people who told me the fonts were changing on their screens said it fixed the problem for them.
-----------------------------------------------
This site has about 250 pages and I am not adverse to changing the code on each and every one of them but I just want to make sure that the correction will make it view correctly on everyone's browsers or at least, IE.

I am not willing to redo all of the pages from scratch...I just don't have that kind of time.

Thanks so much!

Mary

0
 
eyeh8uCommented:
You would have to remove all the font tags, and also do:

<style type="text/css">
<!--
body {
font-family: Trebuchet MS;
font-size: 10pt;
color: #470498;
}
p {
font-family: Trebuchet MS;
font-size: 10pt;
color: #470498;
}
td {
font-family: Trebuchet MS;
font-size: 10pt;
color: #470498;
}
//-->
</style>

(note the addition of a td definition)

to be sure to get this right.of course this is manual editing of 250 files to acheive this. A bit of a pain.

Your best bet is to use a common css file, add this to every page:
<link href="/style.css" rel="stylesheet" type="text/css">

and in the file style.css in the root of your site place:
body {
font-family: Trebuchet MS;
font-size: 10pt;
color: #470498;
}
p {
font-family: Trebuchet MS;
font-size: 10pt;
color: #470498;
}
td {
font-family: Trebuchet MS;
font-size: 10pt;
color: #470498;
}

Then all your font/style information is in ONE central place, then next time you have a font to change, it's a single edit to a single file to change the entire site.
0
 
COBOLdinosaurCommented:
You are wasting your time trying to control font presentation using font tags.  The user preferences can be set to ovrride them.  Also you are using an MS font that will not be on every users computer. if you use the stylesheets to control fonts you will get it more consistent at the cost of accessibility.  You will basically send the message the the visually impaired are not welcome on the site because you will prvent them from adjusting the font sizes unless they install their own sytlesheet ot override you.

If your design is dependent on being able to control font sizes; then it is a defective design.  That is not meant to offend; it is just the plain simple truth.  If you must impose font sizes, atleast do it logically. pt is for print not display.  Use pixels or join the 20th century where accessibility is part of the job by using percentages or em to suggest the font size relationships to the browser.

Sorry if the criticism is too harsh, but if I see someone making mistakes and I don't point them out I'm not doing what I am here for; which is to help get better stuff onto the 'net.

Cd&
0
 
msalvailAuthor Commented:
Eye8hu,

If I make the style.css file and place it in my root folder, do I add <link href="/style.css" rel="stylesheet" type="text/css"> at the top of each page, just after the <body>?

If I do this, do I still have to remove all the font tags or does it overrule them?

What about the pages where I use the same font but use bold for emphasis or italics or whatever...does this stop me from being able to do that? As you can see, the size varies in some places like on the pedigrees, where I have it much smaller.

Thanks!

Mary
0
 
msalvailAuthor Commented:
Coboldinosaur,
I am not offended by your remarks at all and appreciate your honesty. My intention is certainly not to shut out those with bad eyesight. I just am not a professional web designer who does this full time and learn more and more every day. By the way, do you mean join the 21st century? <g>

Mary
0
 
COBOLdinosaurCommented:
Yes 21st.  Either dinosaurs don't type well or can't figure out calendars; or a combination or both.;^)

Cd&
0
 
eyeh8uCommented:
Mary,

You need to put it in the head of the document
<html>
<head>
<title>LOts of fluffy doggies</title>
<link href="/style.css" rel="stylesheet" type="text/css">
</head>
<body>
</body>

CSS is Cascading Style Sheets. Cascading in the sense of things override each other in a cascade, and the <font> tags round paragraphs is the lowest level of the cascade, so you can't over ride it. If you have

p { font-size: 20px }


<p style="font-size: 15px;"><font style="font-size: 10px;">text</font></p>

Then the browser will render text at 10px as that is the lowest level it is defined at so you will have to strip your <font> tags out of your code.

You could run your code through a utility such as HTML tidy perhaps frst to clean up some of the empty elements your HTML editor has inserted in it as a first step to sorting things out.

WRT the scaling of fonts, most sites don't. They will set font-size: 10px (10 pixel, a screen not print size) because the site looks good, which does make it less accessible. But big sites such as EE that have accesibilty in mind use a scaling font. I just checked the style-sheets for this page. Most of it defines it as font-size: small which might be the best thing for you to do.

Mike
0
 
eyeh8uCommented:
If you do use a style sheet, all this:
<style type="text/css">
body {scrollbar-face-color: #000000; scrollbar-shadow-color: #000000;
scrollbar-highlight-color: #000000; scrollbar-3dlight-color: #6B0096;
scrollbar-darkshadow-color: #000000; scrollbar-track-color: #000000;
scrollbar-arrow-color: #EECD50;}
</style>
<style type="text/css">
A {text-decoration: none;}
</style>
<style type="text/css" fprolloverstyle="">
A:hover {font-family: Trebuchet MS; font-size: 12pt; color: #CC99FF}
</style>

Can go into it too.

Using a programmers editor, such as ultraedit (www.ultraedit.com) or perhaps a freeware one (www.nonags.com) you could do a "Find and replace in files" to clean up a lot of your font tags. But I notice in your HTML there are a lot of tags used to increase size for headings and so on. Cleaning up your HTML is probably going to be quite a big job. I ran TIDY over the first page you linked, and it doesn't seem to be able to fix the tagging problems. There may be a good tool for cleaningup the HTML, but I am unaware of one off hand.
0
 
msalvailAuthor Commented:
Whew, now I am more confused than ever. : (

At least I know now WHY the fonts looked different on their three computers. It turns out that under View/Text Size they had it set to "Largest" while all the rest of us had it set to the default of "Medium". Once they switched theirs to medium, everything looked great! That being said, I can't expect everyone who views the site to have their text size set to medium so while that helped these three people, it's not the answer long term, as you know.

For those of us who don't write webpages from scratch, is there an html program that had the options for css and doesn't use the font tags that y'all are saying are pretty much obsolete?

And bottom line, what is the easiest solution for what I have already created as I don't want to start over. This is rather discouraging, to say the least...
0
 
eyeh8uCommented:
Well, Macromedia Dreamweaver is pretty much the aknowledged market leader for a WYSIWG HTML editor. But it's pricey. This site:
http://www.thefreecountry.com/webmaster/htmleditors.shtml

Links (further down the page) some free WYSIWG editors, have a look at them. Checking nonags.com out I found AlleyCode which looks good:
http://www.alleycode.com/ it's "Synchro mode" would allow you to edit it like a word processor whilst seeing what's going on in the source code, a very good way of learning HTML. NVU (http://www.nvu.com/) looks pretty impressive too. In fact VERY impressive:

"Nvu is based on Gecko, the layout engine inside Mozilla; it's a super-fast, very reliable, standards conformant engine maintained on a daily basis by a wide community of developers. Its remarkable support of XML, CSS and JavaScript offers the best authoring platform on the market."

There is "soon" going to be a tool in nvu to 'clean up' html. But not yet it seems.

This (http://www.htmlvalidator.com/lite/) might be worth trying too. And this (http://www.fourmilab.ch/webtools/demoroniser/) is specificaly written to clean up the lousey HTML from Microsoft products.

Have fun ;-)
0

Featured Post

Vote for the Most Valuable Expert

It’s time to recognize experts that go above and beyond with helpful solutions and engagement on site. Choose from the top experts in the Hall of Fame or on the right rail of your favorite topic page. Look for the blue “Nominate” button on their profile to vote.

  • 5
  • 4
  • 2
  • +3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now