Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

Fonts in layers

Posted on 2004-10-29
17
Medium Priority
?
317 Views
Last Modified: 2013-12-03
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).  
0
Comment
Question by:npinfotech
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 9
  • 7
17 Comments
 
LVL 31

Expert Comment

by:seanpowell
ID: 12448135
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
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 12448251
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&
0
 
LVL 8

Author Comment

by:npinfotech
ID: 12448336
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.



0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 8

Author Comment

by:npinfotech
ID: 12448359
and thanks to coboldinosaur as well ( I didn't see your post before I responded to seanpowell).  Man, the Cobol language is a beast...
0
 
LVL 31

Expert Comment

by:seanpowell
ID: 12448401
>> 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
0
 
LVL 31

Expert Comment

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

Sean
0
 
LVL 31

Expert Comment

by:seanpowell
ID: 12448443
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

0
 
LVL 8

Author Comment

by:npinfotech
ID: 12448492
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.  
0
 
LVL 31

Expert Comment

by:seanpowell
ID: 12448526
Yes, there are lots of options. If you can show us what you're dealing with, we can offer some specific suggestions.

Sean
0
 
LVL 8

Author Comment

by:npinfotech
ID: 12448606
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}
0
 
LVL 31

Accepted Solution

by:
seanpowell earned 2000 total points
ID: 12448740
>>Will the px size change work in netscape, and mozilla/firefox (menaing will it display at that size regardless of settings?
No, IE only.

Show me the whole page, or a link to it online - we'll go from there.

Sean
0
 
LVL 8

Author Comment

by:npinfotech
ID: 12484156
Thanks - I've figured out a way to solve this, so I'm closing the issue.  Thanks for your willingsness to help.
0
 
LVL 31

Expert Comment

by:seanpowell
ID: 12484235
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
0
 
LVL 8

Author Comment

by:npinfotech
ID: 12484316
Wait - a C?  Do you mean the "Excellent/good/average" rating?  I thought it was rated excellent.  How can I change this?
0
 
LVL 31

Expert Comment

by:seanpowell
ID: 12484445
I'll open it back up for you - and thank you for replying :-)

Sean
0
 
LVL 8

Author Comment

by:npinfotech
ID: 12484519
great communication and speed on this question.  Thanks.
0
 
LVL 31

Expert Comment

by:seanpowell
ID: 12484665
You're very welcome - a simple mistake.

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

Featured Post

Ask an Anonymous Question!

Don't feel intimidated by what you don't know. Ask your question anonymously. It's easy! Learn more and upgrade.

Question has a verified solution.

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

Originally, this post was published on Monitis Blog, you can check it here . Websites are getting bigger and more complicated by the day. Video, images and custom fonts are all great for showcasing your product or service. But the price to pay in…
Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
The viewer will learn the basics of jQuery, including how to invoke it on a web page. 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.: (CODE)

636 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