This is weird...DOCTYPE/xml declaration making password input smaller in IE?

[jackpf]

Hi all,

I'm having a bit of a headache over this....

 

In all versions of inernet explorer, on my login form, my password input box is slightly smaller than my username box.

Now, if I remove my doctype and xml declaration from the page, or change the input type="password" to input type="text", then they're both the same size.

 

It's fine in all non-IE browsers...

 

The page is here if anyone wants to have a look.

 

Thanks,

Jack.

[rhodesa]

add this to them:

style="width:140px;"

[jackpf]

Ahah, nice one.

 

I've tried size="40" and stuff before, but it always made the password box smaller in IE.

 

You have my thanks

[rhodesa]

with size="40", you leave it up to the browser to determine what "40" means

[jackpf]

Yeah...and I guess IE obviously just makes 40 whatever it wants...being IE and all.

 

Damn thing -.-

 

Just to let you know, I expanded upon your idea and used this in the end-

 

<!--[if IE]>

<style type="text/css">

input[type=password]

{

width: 149px;

}

</style>

<![endif]-->

 

I found 149px to be what IE set as default for text input boxes.

 

Thanks again

[TheFilmGod]

Yeah...and I guess IE obviously just makes 40 whatever it wants...being IE and all.

 

Damn thing -.-

 

Just to let you know, I expanded upon your idea and used this in the end-

 

<!--[if IE]>

<style type="text/css">

input[type=password]

{

width: 149px;

}

</style>

<![endif]-->

 

I found 149px to be what IE set as default for text input boxes.

 

Thanks again

 

Specifying size 40 within an input text/password input, causes IE to calculate the width of the textbox depends on the currently set charaset, font-size, and font type. Size 40 literally tells the browser to make the input form as wide as 40 averaged sized letters.

 

You should never specify the width by the size attribute. Browsers will calculate the size relatively, based on its default rendering technique. This greatly varies from browser to browser, and therefore you should never use the size attribute.

 

You can easily style the width of the input box through the use of CSS. Specifying a fixed width in pixels will create consistency throughout all browsers. Even if you use em, a relative measuring unit, the width of the text box will be calculated PROPORTIONALLY to the size of the website, instead of being calculated unpredictably by the defaults set by browser designers.

 

It is very possible that IE calculated your password input box to be smaller in width than the text input box because the average character used in passwords is *** (dots in IE). This character must have been smaller than the character IE uses in calculating the text input box.

 

On a side note - IE perfectly rendered the webpage. Despite the poor reputation held by IE7, I am under the impression that IE7 is actually one of the most standard compliant web browsers around. A simple term can explain the phenomena, "Garbage in, garbage out." Your html code is an exemplary justification of my principle. Specifying the width of input forms with ' size="#" ' is incorrect. It is deprecated by the W3C, and therefore you can not falsely blame IE. In reality, it was you who misinterpreted the styling technique and the underlying procedure in calculating the width. Do not blame IE.

[jackpf]

I see, and agree with you on all points except-

 

I am under the impression that IE7 is actually one of the most standard compliant web browsers around

 

That's not what I've heard/experienced.

 

IE is notorious for making up their own standards, and ignoring what every other browser is doing.

 

Firefox is a dream to code for. If IE didn't exist, I'd have used half as much css as I have done...

[TheFilmGod]

Can you provide an example where you were required to use IE conditional statements for IE7? More likely than not, your code was poorly designed, causing IE to throw an error out. "Garbage in, garbage out."

 

I still need to see a solid example disproving my belief that IE7 is one of the most standard compliant browsers.

[jackpf]

<!--[if IE]>

<link rel="shortcut icon" href="bin/bin/icon.ico" />

<![endif]-->

<!--[if lt IE 8]>

<style type="text/css">

.title

{

position: relative;

top: -40px;

margin-bottom: -25px;

}

</style>

<![endif]-->

<![endif]-->

<!--[if lt IE 8]>

<style type="text/css">

.f_break

{

padding-top: 0;

}

</style>

<![endif]-->

<!--[if IE]>

<style type="text/css">

input[type=password]

{

width: 149px;

}

</style>

<![endif]-->

 

All of them apply to ie7.

 

And would you please stop calling my code garbage when you obviously haven't even seen it.

 

I'd be interested to see how you get your websites to look good cross-browser?

[TheFilmGod]

What is the underlying html? I'm not quite sure what the conditional statements are for, unless I see the complete code.

 

      <!--[if IE]>
         <style type="text/css">
            input[type="password"]
            {
               width: 149px;
            }
         </style>
      <![endif]-->

 

You wouldn't need to use a conditional statement, if the original width of the input form was specified by CSS. Using the deprecated html attribute, size="40" is the incorrect way to do it.

[jackpf]

What is the underlying html? I'm not quite sure what the conditional statements are for, unless I see the complete code.

Ok, ffs, I'm not going to post my entire CSS on here, if you're really that interested, go and have a look, my url is in my signature.

 

You wouldn't need to use a conditional statement, if the original width of the input form was specified by CSS. Using the deprecated html attribute, size="40" is the incorrect way to do it.

 

And I actually haven't set a size attribute on my password input box. IE makes up the size all by itself, which is why I correct it with a conditional statement.

[TheFilmGod]

I'm not surprised that you have to use conditional statements for IE - the use of <br />'s to replicate margin and the failure to enclose text in block level elements will give you some nasty results in IE.

 

To give you a specific example -> In your css, you didn't specify a width for the input password input. Although FF and Opera will create the password and text input as the same width, IE will not. It's not a surprise either. IE is calculating the size of the password input relatively to the average character "*". I recommend stating the exact width you would like to achieve in your css. Never let the browser defaults choose your fate.

 

The only time I have ever been required to use a conditional statements was to declare the color of the background. For some reason, IE renders images a bit darker than it should.

[jackpf]

Ok, I'm not saying that I'm an amazing coder and my CSS is perfect- I'm 16 and I go to school.

 

However, the fact that you're saying I should implement all this extra code for IE7 is because it needs extra code, because it doesn't display anything like any other browser- thus it's not a standards complient browser.

 

The fact that they've fixed all this stuff in IE8 beta 2 means that the these are all flaws.

 

In IE8, I require no IE conditional statements, as they're becoming standards complient.

 

I don't want to argue about it, but I find IE 7 incredibly annoying to code for. I shouldn't have to specify a width for password boxes- most browsers are smart enough to make them both the same size. Why would you make them different sizes by default? It doesnt make sense.

[haku]

I wouldn't be so sure that each browser sets the widths at the same size. Have you checked them all?

 

Setting a width for all browsers, not just IE, is probably the best thing to do to ensure cross-browser compatibility. Although you should set a CSS based width, and not use the size attribute of inputs. That will ensure cross-browser compatibility - except for maybe IE. You can never be sure what it will do until you try it.

[jackpf]

Yeah, that probably is a good idea tbh.

 

Especially considering I just noticed that IE6 sets it to a different width as IE7 does -.-