Solved

text size

Posted on 2002-05-10
27
221 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
Comment Utility
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
Comment Utility
Setting the font size in pixels IS overridable (thankfully), it just depends on your browser.
0
 

Expert Comment

by:theheadgamester
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
>>>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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
sorry for repeating your <font> comment webwoman.
0
Maximize Your Threat Intelligence Reporting

Reporting is one of the most important and least talked about aspects of a world-class threat intelligence program. Here’s how to do it right.

 
LVL 2

Author Comment

by:dech
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
"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
Comment Utility
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
Comment Utility
Thanks all for your inputs ... I have decided to award the points to ww and bruno.

Thanks all.
0

Featured Post

Enabling OSINT in Activity Based Intelligence

Activity based intelligence (ABI) requires access to all available sources of data. Recorded Future allows analysts to observe structured data on the open, deep, and dark web.

Join & Write a Comment

Suggested Solutions

Title # Comments Views Activity
php session question (Code Igniter) 5 34
Hover Gone 16 30
JavaScript communication inside a IFRAME 9 47
using web browser with BING 40 84
Deprecated and Headed for the Dustbin By now, you have probably heard that some PHP features, while convenient, can also cause PHP security problems.  This article discusses one of those, called register_globals.  It is a thing you do not want.  …
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

743 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

17 Experts available now in Live!

Get 1:1 Help Now