Link to home
Start Free TrialLog in
Avatar of npinfotech
npinfotechFlag for United States of America

asked on

Fonts in layers

I have a web page with layers in it.  Some people who visit the page report that the layers overlap.  I have noticed that for the popele who complain of overlapping, their font sizes and actual fonts are not what I have defined in my CSS files.  The fonts and font sizes of the afftected users are larger, expanding the layers, and forcing the layers to overlap.

Has anyone ever seen this behavior?  Is there something I can do, possibly force certain fonts to be displayed in another, or recommend users change some seeting on their own computers?

The complaints come from users with Windows Xp and Internet Explorer 6 (this was pre-service pack 2 for XP).  
Avatar of seanpowell
seanpowell
Flag of Canada image

Font sizes are controlled by the user, not by you.

You have two options:

1. Make the whole page a graphic :-)
2. Design your layout so it doesn't break when the user decides how they want to view it.

We can help you with the second option.

Sean
Yeah, I'm right with Sean on this one.  It is not a print page that needs to be typeset.  The user owns the browser, and the pages should be rendered the according to their needs not, the the concept the designer/developer of "ideal" presentation.  The only ideal presentation is one that meets the users need for accessibility and usasbility.

Cd&
Avatar of npinfotech

ASKER

Thanks for the response seanpowell.

I'm really not keen on re-designing pages at the moment for numerous reasons.  What I'm looking to do is try to make users conform to the settings of my site.  So, I only see 2 options:

1. Force users somehow to use specific fonts and specific font sizes
2. Give instructions on how to change font settings for better viewing.

If there is another technique someone can think of besides re-designing pages and the ones I have listed above, I'm all ears.



and thanks to coboldinosaur as well ( I didn't see your post before I responded to seanpowell).  Man, the Cobol language is a beast...
>> 1. Force users somehow to use specific fonts and specific font sizes

You can't, unless you use a graphic. You must understand the nature of the medium, it is fluid.

>> 2. Give instructions on how to change font settings for better viewing.

a) Set all your font sizes in pixels. IE users will not be able to resize your text, and those with poor eyesight probably won't be able to read it.
b) Post a note on each page explaining the different menu commands for each possible browser, as they're all different. If you can provide a list of which browsers you want to support, we can come up with instructions for each and every one of them.

Sean
Further, post your CSS file. I'm curious. (assuming you have no font sizes spec'd in your html files.)

Sean
One last post:

>> I'm really not keen on re-designing pages at the moment for numerous reasons.
It's now or later. If your site is broken, then there's really not much point in keeping it, is there?

>>What I'm looking to do is try to make users conform to the settings of my site.
Include a monitor and web browser application when people sign up. Then you won't need to correct the mistakes. :-)

Sean

Ok, got your point.  

The ultimate goal here is to get elements placed in layers to stop crashing into each other.  I know if I use tables, the content wont overlap.  Is there ay way besides tables?  I think I remember reading something a while back about using CSS2 or something to break a page into sections much like tables.  
Yes, there are lots of options. If you can show us what you're dealing with, we can offer some specific suggestions.

Sean
Here is an example CSS file I use.  The main text I define in each layer as type "PageText", and I notice that I haven't assigned a px number for it, just a pt size.  Will the px size change work in netscape, and mozilla/firefox (menaing will it display at that size regardless of settings?

.company {  font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; font-style: normal; line-height: normal; color: #000000}
.BottomNavHome {  font-family: Geneva, Arial, Helvetica, san-serif; font-size: 9px; font-style: normal; line-height: normal; color: #00200}
.HomeMenuText {  font-family: "Arial Narrow"; font-size: 9px; color: #336633}
.Logo {  background-image:  url(/images/company6.gif); background-repeat: no-repeat; background-position: 0px 0px}
.textLink {  font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: #003300; text-decoration: underline}
.bottomNavRed {  font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 9px; color: #FF0000; line-height: normal; text-align: center; vertical-align: baseline; word-spacing: 2px}
.bottomNavGreen {  font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 9px; color: #003300; text-align: center; vertical-align: baseline; word-spacing: 1px; font-style: normal; font-weight: 100}
.PageText {  font-family: Arial, Helvetica, sans-serif; font-size: 10pt}
.date {  font-family: Arial, Helvetica, sans-serif; font-size: 9px; color: #003300}
.main_header {  font-family: Arial, Helvetica, sans-serif; font-size: 18px; font-weight: bolder; color: #003300}
.tabborder {  border: medium #A0CABE solid}
.indexheader {  font-family: Arial, Helvetica, sans-serif; font-size: 14pt; font-weight: bold}
ASKER CERTIFIED SOLUTION
Avatar of seanpowell
seanpowell
Flag of Canada image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Thanks - I've figured out a way to solve this, so I'm closing the issue.  Thanks for your willingsness to help.
I'm glad you solved it  - but a C grade I can do without, espescially after taking the time to offer guidance.

Cd& - can you just delete this please.

Thanks,
Sean
Wait - a C?  Do you mean the "Excellent/good/average" rating?  I thought it was rated excellent.  How can I change this?
I'll open it back up for you - and thank you for replying :-)

Sean
great communication and speed on this question.  Thanks.
You're very welcome - a simple mistake.

Best of luck with the project, and thanks for the A :-)
Sean