IE vs Firefox, Centering a Textbox in a div

[elitebomber]

I have a div whose background image is a custom textbox. I have a div inside that div which contains the actual textbox element. I can move the second div up and down relatively to center it (the textbox) horizontally. The results are different in Firefox and IE7. I am not sure if it is the actual CSS to blame or maybe the textbox element itself is displayed differently. I need a solution that will center the textbox element in both browsers. Right now I have it centered in FF and not IE7.

The HTML portion:

<div id="inputFieldBox">
 
<div id="inputFieldBox2">
 
<input style="background: transparent; border: none; width: 280px; color: #000000; font-size: 14px; font-family: lucida sans unicode, sans-serif;" id="name" name="name" onEnter="this.form.submit()" type="text" />
 
</div>
 
</div>

and the CSS portion:

#inputFieldBox{
height: 37px;
min-height: 37px;
width: 336px;
min-width: 336px;
position: absolute;
background-image: url(inputField.jpg);
right: 32px;
top: 15px;
}
#inputFieldBox2{
height: 28px;
min-height: 28px;
width: 300px;
min-width: 300px;
position: relative;
left: 10px;
top: 10px;
}

So the actual textbox element is inside inputFieldBox2. In IE7 it needs to be moved up about 4px to be centered, but as I said in FF it is centered perfectly.

Additional

I put this at the top of my CSS page and it seemed to fix all the DIV problems I was having between FF and IE7, but this problem is all that I have left.

* {padding: 0; margin: 0;}

Thanks in advance!

[4css]

have you tried a conditional style sheet for just IE7 to test some other styles?

I'm not familiar with forms, however, sometimes doing the conditional style sheet might help you to sort it out.

[vol7ron]

One of the biggest quirks between IE and FF is how they display their textboxes. Unfortunately, there is not much you can do other than do some browser sniffing and customize the styles to get them close.

[4css]

Additional

I put this at the top of my CSS page and it seemed to fix all the DIV problems I was having between FF and IE7, but this problem is all that I have left.

* {padding: 0; margin: 0;}

Thanks in advance!

I was going to suggest this to you EB, you can also add borders to this as well. I have even seen suggested that UL's and OL's are added to this also.

Do a google on IE Conditional statements if you don't know how to set them up. Then what you do is mess with them and see if it helps you out with the form.

[vol7ron]

or look up CSS expression()


vol7ron

[4css]

IE's conditional statements are MS's answer to problems with browsers
[msdn2.microsoft.com...]

Expressions are done using JavaScript if I am remembering correctly. So if someone has disabled their Javascript, there could be issues.

[vol7ron]

if someone's disabled their javascript, there's already issues :)

[SuzyUK]

Welcome to WebmasterWorld! elitebomber

Conditional Comments is one way to handle it, as that way you could get more precise about IE over FF, etc.. but Opera is different again, CC usage would be negligible for the pixel benefit it might gain.. so I say just go with the flow and leave a few pixels around the box which no-one will notice anyway.

Inputs are notoriously hard to position/control accurately x-browser, but forms and inputs themselves have default padding/margins so once you get them under control you can pretty much treat them like any other element, just do not expect complete pixel perfection it won't happen as inputs themselves differ from browser to browser

#inputFieldBox{
height: 37px;
width: 336px;
position: absolute;
background: #f00;
right: 32px;
top: 15px;
text-align: center;
}

#inputFieldBox2{
position: relative;
height: 100%;
width: 284px;
min-width: 284px;
background: #cfc;
margin: 0 auto;
text-align: left;
}

#inputFieldBox2 input {
margin: 7px 0;
padding: 0;
width: 280px;
color: #000;
font: 14px lucida sans unicode, sans-serif;
}

the height of the outer box will likely be the height of your graphic, inner box matches and just centers the input horizontally, the input itself is margined to approximate the center and is where if you get your screen calipers out you will likely find a pixel or two of difference

[elitebomber]

Thank you all for your replies. I forgot IE had the built in conditional. I was able to do this:

<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="format2.css" />
<![endif]-->

And then I created a format2.css to overwrite the definition of inputFieldBox2 defined in format.css

#inputFieldBox2{
height: 28px;
min-height: 28px;
width: 300px;
min-width: 300px;
position: relative;
left: 10px;
top: 7px;
}

So it took a 3 pixel movement to get it centered in IE. This accomplished what I wanted. Thanks again!