Fixed font size in firefox?

Question

I'm wanting to keep the font size of a navigation menu the same size for all browsers. I set the font-size of the navigation menu text to a specific pixel size. In IE this works, but not in FF.

The problem is, if a person changes their browser's font size, then 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 understand it is for accessibility, but it would otherwise mess up the design and I'd rather not use images instead of text for the navigation menu.

Thanks!

Answer 1

The only guaranteed way to have this level of control is to render the text as images. Although this can work OK for menus (which don't change that often), I've seen it horribly abused by sites where all text was done as images.

I have a good friend who was trained as a print designer. When she first started doing web design it almost caused her to go insane because of the lack of control. I suggested she breath deeply, study the CSS box model, and then design for the "normal" font size +/- 1 size.

Answer 2

You have three choices:

1. Fix your menu layout such that it is more tolerant of different font sizes (recommended: plenty of users who won't agree with your choice of font size - not just limited to visually impaired users either).
2. Replace text with images (with appropriate alt text!); FF (and IE) will still scale these in "zoom" mode, but won't break the layout of the page.
3. Do nothing. Leave the broken layout as a big "FU" to those users who would otherwise strain to read your fixed-sized text.

Answer 3

You're fighting a fight you're not going to win if you try to keep everything fixed and happy for your eyes only. If the content if for consumption by the public, then understand that Ms. Public has different opinions as to the correct font size she should be reading.

Browsers have evolved a long way to stop what you're trying to do from preventing people from seeing content.

Evolve and understand that font-size SHOULD change with a CTRL + '+/-'

Answer 4

Problem is not that someone is zooming , the client wanted like that and it is like he wanted , the problem is that 9pt font is displaing in ie 7 and 8 and chorme but not in ff

Answer 5

There is another option:

Detect the user's font size using the following script: http://www.alistapart.com/articles/fontresizing/

Then adjust a container div in "ems" to compensate for the user size.

For instance if user font-size is 22 and base is 20, then make your container div have a font-size of 20/22 (i.e., 22*(20/22)=20). :)

Note: The reason you'd need a container div is because your event listener would be watching out for font-size changes to the body.

(This answer will probably piss off some usability experts. Sorry to those people. You do have good points, but an answer is still an answer. :p)

---

PS. I figure I'd best attach my implementation code just to prove that it works. I haven't edited this code for global application. It's copied and pasted...look out for things such as replacing my IE conditional (which uses dynamically added CSS classes) with convential browser detect conditionals (for instance).

It's lengthy but all necessary:

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'S 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);
                }