Text Box size is different in IE 6 and FireFox 3.6

Question

I am facing issues with text box size when veiwing in Fire Fox 3.6. < input class="dat" type="text" name="rejection_reason" size="51" maxlength="70" onchange="on_change();">

style is as: .dat { font-family : verdana,arial,helvetica; font-size : 8pt; font-weight : bold; text-align : left; vertical-align : middle; background-color : White; }

Text box size in Fire Fox is bit smaller than IE6.

Not sure why IE6 and FireFox displaying text box of diff size.

Answer 1

Try specifying the width in your css. If that remains broken, you can append an asterisk to the front of the width word as a second entry and it will apply only in IE6.

.dat
{
    width: 100px;
    *width: 105px; -- or whatever makes it look correct
}

EDIT: Thanks for the update on the special character.

Answer 2

Normal problem when developing for different web-browser engines. Note that you maybe should develop for FireFox 3.6 rather than IE6 because IE6 have set to "old browser" that microsoft is not supporting anymore. Change your code to work good in FireFox, IE, Chrome, Opera. look for more info at: http://stackoverflow.com/questions/72394/what-should-a-developer-know-before-building-a-public-web-site

Answer 3

You have not specified its width just that you want it to take 51 charecters via the size attribute. I would suggest removing the Size="51" attribute and adding a style of width:666px;

EDIT: after your comment Firstly just because you can does not mean you should. The corret way of solving this is changing all of your <input type="text"> to use a css class or css width to define their width.

However the following jQuery will add a width style to every input type=text which has a size attribute

jQuery(                            // on Document load 
    function($){                   // run this function 
    $('input[type=text][size]')    // find all input type=text with a size attr
           .each(                  // for each element found
        function(index, Element){  // run this function
            var size = $(this).attr('size');  // get size attrubte value
            $(this).width((size * 0.6)+"em"); // set the css width property to 
        });                                   // a nasty huristic
    }
);

Now since this only effects inputs with size specified, as you touch each page you can remove the size attr and replace it with Css size, so eventuly you will not need this script.

Answer 4

The @size attribute gives a size in characters. However, unless you are using monospaced fonts, the size of a character itself is not something that is well-defined. In addition, different rendering engines may use different rules for character spacing and/or kerning. So, at the end, the attribute is no more than a vague hint to the browser.

Have you tried something like style = "width:51em;" instead? Haven't tested it, but the width property is well-supported, so I'd hope this would work. You can also use absolute (pixel) units if you want a more exact size.

Hope this helps.

Answer 5

With a more full explanation, which I just had to give to a manager;

IE6 was built around 2000, and ignored several significant web standards at the time. IE6 was somewhat of a "lesson learned"; IE7 is better about following those standards, and IE8 is better still.

Firefox was built around Netscape/Mozilla, and importantly, they followed the public standard as much as they could. Firefox largely behaves like Safari, Chrome, Opera, and the tons of tiny-marketshare browsers out there.

Businessperson asks: So, why support the standard, instead of IE, which is the big kid on the block? Almost all of our customers use IE!

Answer: Because IE is slowly moving towards the standard, too. If we support Firefox, IE8 is easy, and we probably get IE7 as well with almost no changes. IE6 is the fly in the ointment here.

If we support IE6 - the original proposal - then IE7 is a special case, IE8 is another special case, Firefox is a special case, and so on.

If we can encourage users to move away from IE6, that's our best case scenario. I believe Microsoft officially ended all support - including security patches - for IE6 when Server 2003 SP1 left support, April 2009. Google has stopped supporting IE6 entirely, for example, politely letting users know they need to upgrade "for the full site experience". Sites like IE6NoMore offer a pretty slick CSS popup for those running IE6, giving them a few upgrade options.

But in the meanwhile, since customers do use it, IE6 is here to stay, and it's easiest - and most maintainable - to build to the standards, and hack our way back to IE6 until it's done.