PDA

View Full Version : HVMenu Font Size Problem



dmwhipp
10-26-2009, 12:46 AM
1) Script Title: HVMenu V5.5

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex1/hvmenu/index.htm

3) Describe problem: Font Size Problem

I just discovered that on some computers the font size for the menu is being ignored. I found this by viewing one of my sites using HVMenu on a Toshiba laptop. The text is appearing much larger than intended so some words do not appear. I tried specifying px in the menu code, but that caused an error.

Any help in fixing this issue would be greatly appreciated.
Thanks,
Deborah

jscheuer1
10-26-2009, 01:06 AM
Toshiba has its own magnify utility. This may or may not be at play here. Specifying pixels is useless in controlling font size except in IE 6 or less. The best approach is to specify font sizes in percent, and container dimensions in ems. That way, as the font size changes, the container size will as well. This is not perfect, but really the best that's available.

However, since the most widely used browsers now generally zoom instead of merely changing font size, or at least offer zoom (or something like it by another name) as an alternative, anything that works at standard settings should be accessible when the user resizes the page. I predict that this (zoom or zoom like action as opposed to just changing font size) will soon become more or less the sole method for resizing pages in browsers going forward.

In case this isn't clear, a zoom type action acts as though an image were taken of the page and blown up and enhanced. Everything, images, texts, containers, etc. are resized proportionally to each other. Most popular browsers do this now (though some do it better than others), some as an additional option to just changing font size, others in place of it.

dmwhipp
10-26-2009, 01:10 AM
Thanks for your quick reply John, but I have to admit I'm lost. If I want the menu font to appear to be appx. 9pt or 12 px and the menu width appx. 140px wide, how would I go about specifying the font size percentage and container in ems to achieve this effect?
Thanks,
Deborah

jscheuer1
10-26-2009, 01:30 AM
12px is 75% of 16px (12/16 times 100) - 16px being the standard font size. If you have already changed the font size in a parent element further calculation or trial and error is required. 140px (140/16) is 8.75em. Once again, if your font in a parent element has already been changed, the divisor (16 in the above examples) must be the effective pixel count of the size in effect for the child as inherited from the parent.

I know this is a bit complicated, but it really is the best you can do. In a browser that adjusts just font sizes, it will work out fairly well. In a zooming browser, it really doesn't make any difference, any units will work. Just make sure that the font size in your testing browser is set to normal and zoom is set to 100% while designing your page.

However, it is always possible in this transitional period from font size to zoom as mentioned in my previous post that some systems (combination of browser and computer) may still get it wrong.

Unless you use all images, there is no real control over size, but if you do use all images, you will be less accessible because at that point only those browsers set to the resolution of your images will present as intended, all others will look too large or too small.

Finally though - if it looks OK at 100% zoom and normal font size in your testing browser, 99% of users will be able to adjust their browsers to at least be able to view your page in a usable and legible manner. More so if you use percent font sizes and em container dimensions.

dmwhipp
10-27-2009, 12:37 PM
Hi John,
Thanks for the response, but I have to admit I'm lost. Where would I add the percentages for the font size - in the menu_com.js file?

jscheuer1
10-27-2009, 05:48 PM
I was thinking about that, but I haven't really looked into it because HV is outdated. It was fairly well written for its time - the transition from NS 4 to 6 and the transition from IE 4 to 5.

You would be better off using one of the more modern menus that allow for direct css control of their styles.