Fixed font size in firefox?
I want to keep the font size of the navigation menu the same size for all browsers. I have set the font size of the navigation menu text to a specific pixel size. It works in IE, but not in FF.
The problem is that if a person changes their browser font size it completely ruins the menu layout in FF.
Is there a way to adjust this for FF or is there no way around it? I realize this is accessibility, but it would otherwise mess up the design and I'd rather not use images instead of text for the navigation menu.
Thank!
source to share
You have three options:
- Adjust your menu layout to be more tolerant of different font sizes (Recommended: many users who disagree with your choice of font size), not just visually impaired users.)
- Replace text with images (with appropriate alt text!); FF (and IE) will still scale them in "zoom" mode, but will not break the page layout.
- Do not do anything. Leave the broken layout as a large "FU" for those users who would otherwise strain to read fixed-size text.
source to share
You are fighting what you won’t win if you try to keep everything corrected and happy only for your eyes. If the content is, if for public consumption, then understand that Ms. Public has different opinions about the correct font size that she should read.
Browsers have developed a long way to stop what you're trying to do from people not seeing your content.
Develop and understand that the font size MUST be changed with CTRL + '+/-'
source to share
The only guaranteed way to have this level of control is to display text as images. While this may work fine for menus (which don't change often), I've seen it get badly abused on sites where all text was rendered as images.
I have a good friend who was trained as a designer. When she first started doing web design, it almost drove her crazy with a lack of control. I suggested that she take a deep breath, examine the CSS block model, and then create a "normal" font size of +/- 1 size.
source to share
There is another option:
Determine the user's font size using the following script: http://www.alistapart.com/articles/fontresizing/
Then adjust the div in "ems" to compensate for the size of the user.
For example, if the user's font size is 22 and the base is 20, then your container div will have a font size of 20/22 (i.e. 22 * (20/22) = 20). :)
Note. The reason why you need a container container is because your event listener will watch for changes in the font size in the body.
(This answer will probably call out some usability experts. Sorry for those people. You have good points, but the answer is still the answer.: P)
PS. I suppose it's best to attach your implementation code to prove that it works. I have not edited this code for a global application. He copied and pasted ... notice things like replacing my IE conditional (which uses dynamically added CSS classes) with browser detection conditional (for example).
This is the length, but everything needed:
updateBaseFontSize : function(fontSize,reloadBool){
/*Format 1 is fed from the plug; format2 is the body size equiv
*examples:
*Frmt 1 (all/IE) | Frmt 2 (all/IE)
*20/18 | 16px/16px
*21/21 | 17.6px/19px
*22/23 | 19.2px/22px
*
*Purpose of updateBaseFontSize is:
* 1. convert format 1 figures to format 2
* 2. modify the all containing div 'fontbodyreadjust'
* to compensate for the new user defined body font size
*/
var format1Base;
var format1Size = fontSize; //equals new size in pixels
var reloadPage = reloadBool; //prevents reload on 1st visit
var baseConverter;
var changeConverter;
if ($('body').hasClass('browserIE')) {
format1Base = 19; //expected base size value for IE
baseConverter=16/19; //converts from format 1 to 2 for IE
changeConverter=1.5; //ditto for the difference from base size for IE
} else {
format1Base = 20;//expected base size value for all other browsers
baseConverter=16/20; //converts from format 1 to 2 for all others
changeConverter=1.6; //ditto for the difference from base size for all others
}
//Find modifiedSize, how much to compensate for the new body size
var format2Base = format1Base * baseConverter;
var format2SizeChange = (format1Size-format1Base)*changeConverter;
var format2NewSize = format2SizeChange + format2Base;
var modifiedSize = format2Base/format2NewSize;
//Allow text resizing for shrinking text and very very large text
//Only works for safari. meant to prevent odd behavior at math extremes
if ((format2NewSize >= format2Base)&&(modifiedSize>.6)){
$('#fontbodyreadjust').css('font-size',modifiedSize+'em');
}
//reloadPage boolean in place so that reload doesn't occur on first visit
if (reloadPage){
window.location.reload()
}
},
initHome : function(){
// UNHIDE HOME PAGE CONTENT AFTER IT LOADED. OTHERWISE, LAYERED AND MESSY
$('#slider').css('display', 'block');
// PREVENT VARIOUS USER BROWSER-FONT RESIZE SCENARIOS
// Note: irrelevant for browsers that zoom all elements simultaneously
window.initFontResizeDetector = function(){
var iBase = TextResizeDetector.addEventListener(onFontResize,null);
//Don't run the updateBaseFontSize if font size is not larger than usual
if (iBase>20){
var reloadBoolean = false;
window.updateBaseFontSize(iBase,reloadBoolean);
}
}
//id of element to check for and insert control
TextResizeDetector.TARGET_ELEMENT_ID = 'bodyContent';
//function to call once TextResizeDetector has init'd
TextResizeDetector.USER_INIT_FUNC = window.initFontResizeDetector;
window.onFontResize = function(e,args) {
var iSize = args[0].iSize; //get new user defined size
// var iDelta = args[0].iDelta; //get new user defined size
// var iBase = args[0].iBase; //get new user defined size
var reloadBoolean = true;
// console.log(iSize,iDelta,iBase);
window.updateBaseFontSize(iSize,reloadBoolean);
}
source to share