Solved

Fonts in layers

Posted on 2004-10-29
315 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
Question by:npinfotech
    17 Comments
     
    LVL 31

    Expert Comment

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

    Author Comment

    by:npinfotech
    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
    >> 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
    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
    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
    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
    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
    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:
    >>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
    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
    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
    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
    I'll open it back up for you - and thank you for replying :-)

    Sean
    0
     
    LVL 8

    Author Comment

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

    Expert Comment

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

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

    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone. Privacy Policy Terms of Use

    Featured Post

    Learn The Basics of Ethical Hacking & Pen Testing

    Computer and network security is one of the fastest growing and most essential industries in technology, meaning companies will pay big bucks for ethical hackers. This is the perfect course to leap into this lucrative career, learning how to use ethical hacking to reveal ...

    A colleague recently asked me about how to give his client a small part of the web site that could be completely under the client's control.  Since I have done this sort of thing before to add emergency banners to a web site, I decided I would creat…
    "I want to put my photos online, but I don't want them stolen.  What settings should I use?" When You Put Photos Online First and foremost, any digital file published on the WWW can be copied, stored, modified, retransmitted, etc.  Remember Naps…
    In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
    The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

    875 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

    14 Experts available now in Live!

    Get 1:1 Help Now