Getting a text input to look in IE the way it does in FF etc.

[MoreBloodWine]

Below is the code used to display a small input field on my site, well here's what I want to know.

Using the pictures below I really like the way it displays (more uniform) in FF etc. but not in IE.

It appears something is going on with the top and left borders in IE, any way, is there a CSS fix or something I can use to get it to display in IE the way it does in FF etc. ?

Thx for your time !

Donation Amount: $<input type="text" name="amount" value="0.00" size="3" style="border-width: 1px 1px 1px 1px; border-color: #9E853D; height: 10px; font-size: 10px;">

Internet Explorer
[img]http://www.eojmarket.com/NonForumStuff/images/ieinput.gif[/img]

FireFox
[img]http://www.eojmarket.com/NonForumStuff/images/ffinput.gif[/img]

Edit: One thing I also noticed that I don't quite get is this...

Why are the right and bottom border of the input a different color than that of the top and left borders in FF when I have border-color set ?

[MoreBloodWine]

The edit has been solved, as far as border color goes in FF I needed to use border: 1px solid;

[MoreBloodWine]

I also just now noticed that by fixing the border color issues everything looks fine in IE border wise but there's still a text / box alignment issue.

[MoreBloodWine]

All problems solved but one minr thing remains, and yes I'm a stickler for it.

You'll need really good eyes or a picture program to see it so you can max out to see the page by pixels. Anyway, if you look at the inputs in both IE & FF you'll notice as before everything looks superb in FF but the text is off (down) by one pixel in IE. Yes, yes, yes I know some people would just say the heck with it and ignore it but I like, if possible for everything to be perfect. So ya, anyway to bump the text / inputs up by one in IE so they look the same in FF ?

I've tried display: inline; and even display: block; but none of those appeared to work.

Don't be so anal. One pixel is ridiculous. You've wasted how much time on this? What else could you have done in the meantime? Not trying to be rude, but you should read your own statement:

> You'll need really good eyes or a picture program to see it so you can max out to see the page by pixels.

*shakes head*

[MoreBloodWine]

And this is why I rarely come to this "anal" site becuae of peopel liek you. This is supposed to be a site for people to seek help not for people to get ridiculed for something they want because they like perfection. If you wanted to bump your post count you cold have gone somewhere else.

Ho ho ho. Nice one MBW. I'm just saying that you should be spending your time time more productively that this. Fussing over a single pixel IS anal - sorry. As for bumping my post count (that last one bumped it by 0.04%) - I'm way past that nonsense. Well you've made 18 posts in 2 months, that's not bad for a n00b. You could reply to this again and bump YOUR post count by a whopping 5.5%. Enjoy.

[MoreBloodWine]

To bump or not to bump, that is the question.

All that crap aside, if no one helps me fine if someone does help me great. Either way I'm not forcing anyone to help me and as for spending my time better. Making the post took what two minutes, the rest of the time while waiting for help I work on other stuff. In any case, just because you can't solve a problem doesnt mean you need to criticize me for how I spend my tiem and something I'd like to fix.

Anyway, I'm done with this post for now. If someone helps me they help me if they dont they dont but ya, is it my fault because I have a problem you dont have the capabilities of solving ?

Put me on your "Ignore List" in your Control Panel. ;)

[Ritesh_4]

Well, difference between IE and FF is that IE's interpretation of the css file is sometimes not to perfection, I can say so coz I dev. most of my sites on FF, but when I view in IE, I know there will always be an unneeded space or pixel here and there, so in the end I just do it on FF, and leave as it is on IE, and no one complained so far, and if by chance anyone did, I told them to get FF installed instead as its interpretation of css files is way better than IE :P

[Borzoi]

It's possible that IE naturally adds a bit of padding. Try putting padding: 0px; into the css.

I work similarly to lordrt in the way that I develop my sites for FireFox and don't worry too much about other browsers but I always make sure it's workable. A few things may be mis-positioned but that won't usually matter and I put a "This site is best viewed using FireFox" message if they are using a browser which doesn't display it how I want to to.

[MoreBloodWine]

Problem solved by adding the following to the style tag of the input.

vertical-align: middle;

Ty to those who actually tried to help !