Solved

text size

Posted on 2002-05-10
27
222 Views
Last Modified: 2010-04-09
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
Comment
Question by:dech
  • 7
  • 6
  • 5
  • +7
27 Comments
 
LVL 19

Expert Comment

by:webwoman
ID: 7002119
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
 
LVL 17

Expert Comment

by:dorward
ID: 7002215
Setting the font size in pixels IS overridable (thankfully), it just depends on your browser.
0
 

Expert Comment

by:theheadgamester
ID: 7002528
if you use CSS (cascading style sheets) then you can make the text font and many other things the same for every viewer.
0
 
LVL 2

Author Comment

by:dech
ID: 7002530
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
 

Expert Comment

by:theheadgamester
ID: 7002624
what browsers and OS' are you using?  It could end up being the way that the certain computer has the fonts installed maybe?
0
 
LVL 51

Expert Comment

by:ahoffmann
ID: 7002898
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
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 7003194
>>>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
 
LVL 19

Expert Comment

by:webwoman
ID: 7003451
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
 
LVL 2

Author Comment

by:dech
ID: 7003469
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
 
LVL 12

Expert Comment

by:lexxwern
ID: 7004009
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
 
LVL 19

Expert Comment

by:webwoman
ID: 7004010
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
 
LVL 12

Expert Comment

by:lexxwern
ID: 7004014
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
 
LVL 12

Expert Comment

by:lexxwern
ID: 7004021
sorry for repeating your <font> comment webwoman.
0
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 
LVL 2

Author Comment

by:dech
ID: 7004324
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
 
LVL 12

Expert Comment

by:lexxwern
ID: 7004326
well dech it should be either a <span> or a <div>

like this

<style>

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

</style>

OR

<style>

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

</style>
0
 
LVL 12

Expert Comment

by:lexxwern
ID: 7004379
ohh since you are using class="email" this should be it...


<style>

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

</style>

OR

<style>

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

</style>
0
 
LVL 19

Expert Comment

by:webwoman
ID: 7004541
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
 
LVL 2

Author Comment

by:dech
ID: 7004972
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
 
LVL 2

Author Comment

by:dech
ID: 7004975
Thank you lexxwern, is that all i need to change? Or are there more things that can be improved?

Thanks
0
 
LVL 30

Expert Comment

by:third
ID: 7005013
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
 
LVL 18

Expert Comment

by:bruno
ID: 7005068
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
 
LVL 19

Accepted Solution

by:
webwoman earned 50 total points
ID: 7005169
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
 
LVL 18

Expert Comment

by:bruno
ID: 7005825
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
 

Expert Comment

by:Priestex
ID: 7006995
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
 
LVL 2

Author Comment

by:dech
ID: 7007271
"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
 
LVL 19

Expert Comment

by:webwoman
ID: 7007426
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
 
LVL 2

Author Comment

by:dech
ID: 7012187
Thanks all for your inputs ... I have decided to award the points to ww and bruno.

Thanks all.
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Introduction The Google Maps API offers various ways to draw dynamic and static maps.  Using a combination of PHP and JavaScript, you can draw active JavaScript maps that allow pan-and-zoom in the client browser window.  You can also draw "static" …
Someone recently asked me about how to display a progress indicator on a page while an iframe is loading. And I remember when I first came across this myself. It was a bit tricky to get my head around, but really, it's very simple. The most impor…
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

895 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

11 Experts available now in Live!

Get 1:1 Help Now