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

text size

Hi,

Browsers allow their users to choose different text size to view webpages in.

This really messes up my site if say it was set on largest.

Should I be concerned enough to adapt my site or just accept that i will lose that percentage of people (assuming it isnt a site purely for the disablied - ie just a general site).

dech
0
dech
Asked:
dech
  • 7
  • 6
  • 5
  • +7
1 Solution
 
webwomanCommented:
Use stylesheets, and set the font size as pixels. That shouldn't resize unless they totally override your formatting.

Hardly anybody does that, and those that do just about always have an extremely good reason (usually really bad vision and they can't read it otherwise ;-) )
0
 
dorwardCommented:
Setting the font size in pixels IS overridable (thankfully), it just depends on your browser.
0
 
theheadgamesterCommented:
if you use CSS (cascading style sheets) then you can make the text font and many other things the same for every viewer.
0
What Kind of Coding Program is Right for You?

There are many ways to learn to code these days. From coding bootcamps like Flatiron School to online courses to totally free beginner resources. The best way to learn to code depends on many factors, but the most important one is you. See what course is best for you.

 
dechAuthor Commented:
yea .. i do use stylesheet (or it would totally mess up lol).

But it still changes some what ... especially where the text is tightly bounded.

Dech
0
 
theheadgamesterCommented:
what browsers and OS' are you using?  It could end up being the way that the certain computer has the fonts installed maybe?
0
 
ahoffmannCommented:
i.g. there is no way to force the browser to use any font or font size. Dot.
If somebody don't believe it, simply use arachne, lynx or w3m ;-)

dech, if you realy need to insist on font sizes, and do not do what HTML is for ("L" stands for language, not layout:), then you have to accept that some browsers (user) won't see what you want them to see. In such a case you might think of using a format which is not rendered at the client, like pdf.
0
 
COBOLdinosaurCommented:
>>>Should I be concerned enough to adapt my site or just accept that i will lose that percentage of people

You should use CSS to get the best look under optimum conditions.  A user who overrides your CSS is not going to leave or avoid the site because of layout.  If they are using large fonts, they are used to seeing the rendering of pages messed up.

Actually quite the opposite is true.  If a user has set accessibility preferences, it is likely the they NEED them that way.  If you prevent the user preferences, you may make the site unusable for many users who must have particular settings.

I almost never set font size; and when I do, I use the named sizes so as not to interfere with user preferences.

Cd&
0
 
webwomanCommented:
For the same reason I use percentages -- those key off the browser default, so if they have the default set large, everything is proportionally larger.

No matter what you do, you are NOT going to get it to render EXACTLY the same on all computers/OS/browsers. If your layout is so inflexible that it can't accommodate the basic differences, you should work on the code/layout until it does.

Often you don't have to completely rework it, just judiciously use valign, colspan, rowspan, nested tables, to make it render better.
0
 
dechAuthor Commented:
I tried using different text sizes on EE ... everything stayed the same.

But on one of my pages http://www.nellyfurtado.bestmusicpages.com

There is a significant change.

Why is that?

Thanks
0
 
lexxwernCommented:
well, all platforms have their issues...

if you can make your site look good in 800*600 IE5+.. i think you've satisfied the majority.

you'll just have to wait for new technologies to arrive for your site to be ALL-Platform Friendly.

PS: ever thought of 640*480 Browser size large ;-)
0
 
webwomanCommented:
EE doesn't allow formatting -- it does it.

And you're using the styles wrong.
<TR><TD> <font class="email">User Name:</font> </TD><TD>

Is totally wrong. You don't need the font tag, that's why you have styles.
Depending on how your styles are defined (I didn't grab the stylesheet), you'd probably want this.
<TR><TD class="email">User Name:</TD><TD>

NO FONT TAGS. You apply the style to the ELEMENT.

You also haven't used them very much -- unless you re-defined the standard tags (P, LI, td, etc.) you'll need to apply the style where you want it to be used.
0
 
lexxwernCommented:
i went through your code, i think the coding is done very well...but just one or two <font> tags used...get rid of them...theyll get phased out soon.

and also, the w3c xhtml standards need "" on attributes...imean <table border=" ">...

i think instead of worrying over font sizes, you should try to convert to xhtml transitional...

xhtml...dont get worried abt the 'x' is xhtml...it is nothing but clean html and in your case cleaner html...
0
 
lexxwernCommented:
sorry for repeating your <font> comment webwoman.
0
 
dechAuthor Commented:
Webwoman ... i tried it your way ... but the it didn't work. I think i must have something fundamentally wrong in my style sheet. I defined the email tag as a font class. What should it be?

Thanks
0
 
lexxwernCommented:
well dech it should be either a <span> or a <div>

like this

<style>

div#email{.........}

</style>

OR

<style>

span#email{.........}

</style>
0
 
lexxwernCommented:
ohh since you are using class="email" this should be it...


<style>

div.email{.........}

</style>

OR

<style>

span.email{.........}

</style>
0
 
webwomanCommented:
Post your stylesheet. If it's wrong, you can apply the styles correctly and it still won't work. And I suspect it's VERY wrong. ;-)
0
 
dechAuthor Commented:
BODY
{
  scrollbar-face-color: orange; scrollbar-shadow-color: darkblue;
  scrollbar-highlight-color: yellow; scrollbar-3dlight-color: brown;
  scrollbar-darkshadow-color: brown; scrollbar-track-color: brown;
  scrollbar-arrow-color: black
}

A.framelink
{
  FONT-SIZE: 11px;
  COLOR: #ffffff;
  FONT-FAMILY: Tahoma, san-serif;
  TEXT-DECORATION: none
}

A.frameyellow
{
  FONT-SIZE: 9px;
  COLOR: yellow;
  FONT-FAMILY: Tahoma, san-serif;
  TEXT-DECORATION: none
}

A.white:link { color:#0033CC; font-size=16 }
A.white:visited { color:purple; font-size=16 }
A.white:hover { color:red; font-size=16 }
A.white:active { color:#666666; font-size=16 }

font.sep1 { font-size: 11px; color: #f4d500; font-family: Tahoma, san-serif }
font.title { color:darkblue; font-size=18 }
font.normal { color:black; font-size=14 }
font.email { font-size=15; font-weight=bold }

#FullScreen { position:absolute;top:0;left:0 }
0
 
dechAuthor Commented:
Thank you lexxwern, is that all i need to change? Or are there more things that can be improved?

Thanks
0
 
thirdCommented:
don't use equals signs use colons,

A.white:link { color:#0033CC; font-size:16pt}
A.white:visited { color:purple; font-size:16pt}
A.white:hover { color:red; font-size:16pt}
A.white:active { color:#666666; font-size:16pt}

font.sep1 { font-size: 11px; color: #f4d500; font-family: Tahoma, san-serif }
font.title { color:darkblue; font-size:18pt}
font.normal { color:black; font-size:14pt}
font.email { font-size:15pt; font-weight:bold }

0
 
brunoCommented:
try this...



BODY
{
 scrollbar-face-color: orange; scrollbar-shadow-color: darkblue;
 scrollbar-highlight-color: yellow; scrollbar-3dlight-color: brown;
 scrollbar-darkshadow-color: brown; scrollbar-track-color: brown;
 scrollbar-arrow-color: black;
}

A.framelink
{
 FONT-SIZE: 11px;
 COLOR: #ffffff;
 FONT-FAMILY: Tahoma, san-serif;
 TEXT-DECORATION: none;
}

A.frameyellow
{
 FONT-SIZE: 9px;
 COLOR: yellow;
 FONT-FAMILY: Tahoma, san-serif;
 TEXT-DECORATION: none;
}

A.white:link { color:#0033CC; font-size: 16pt; }
A.white:visited { color:purple; font-size: 16pt; }
A.white:hover { color:red; font-size: 16pt; }
A.white:active { color:#666666; font-size: 16pt; }

font.sep1 { font-size: 11px; color: #f4d500; font-family: Tahoma, san-serif; }
font.title { color: darkblue; font-size: 18pt; }
font.normal { color: black; font-size: 14pt; }
font.email { font-size: 15pt; font-weight: bold; }

#FullScreen { position: absolute; top:0; left:0; }
0
 
webwomanCommented:
Get rid of all the font things. That's not right at all. You don't NEED it -- you have the fonts defined in the styles.

You don't have styles defined for any of your a.name styles -- do you not want them? Do you ONLY want those styles to be applied to links? Because that's how you've set it up...

You DO NOT need anything in front of the class definition. So it's perfectly fine to have .email, .sep1, .title. I'd change normal -- it may be a reserved word.

That's why it's not working... you don't have the stylesheet set up right. ;-)

bruno, I can't believe you let those font.xxx styles that way... ;-)
0
 
brunoCommented:
hmm....didn't really look at the classes at all to be honest with you, just looked at the syntax, the "=", the lack of semicolons, not specifying what unit of measure on the font size, etc....

you are correct of course, they shouldn't be that way...

BRUNO
0
 
PriestexCommented:
you should try specifying ur text size in % instead of pixels so that the text size adjusts to the screen size automatically.
Using style sheets is also a good option as mentioned earlier
0
 
dechAuthor Commented:
"You don't have styles defined for any of your a.name styles -- do you not want them? Do you ONLY want
those styles to be applied to links? Because that's how you've set it up... "

I dont understand wot u meant by that? i thought a.wotever styles are for links only

Thanks all ... points will be divided.
0
 
webwomanCommented:
No, styles are for everything. Every tag, every element, can have a style applied to it.

That's the power of CSS -- you define an external stylesheet, link to it in all the pages of your website, use the styles for EVERY element (you can define the standard HTML tags too, you know) and when you want to change the pages, you change the stylesheet -- NOT go through all the pages and change 60,000,000,000,000 font tags.

One file, one set of changes. You can't manage a large site (or worse yet, do a REDESIGN of a large site) without stylesheets. At least, not in an average lifetime... ;-)
0
 
dechAuthor Commented:
Thanks all for your inputs ... I have decided to award the points to ww and bruno.

Thanks all.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

The 14th Annual Expert Award Winners

The results are in! Meet the top members of our 2017 Expert Awards. Congratulations to all who qualified!

  • 7
  • 6
  • 5
  • +7
Tackle projects and never again get stuck behind a technical roadblock.
Join Now