Border: none works in IE8 but not IE7?

Question

I have text inputs with 1px padding that I sometimes put 1 px borders on. I want all text inputs to fill the same vertical space, borders or not. To achieve that, I created a "don't have borders, but fill space like you do" class with border: none and 2px of padding:

.BorderInputNone {
 border: none;
 padding: 2px;
}

This worked in IE8, but in IE7, there were visible borders around the input.

EDIT: I fixed it by using border: transparent.

.BorderInputNone {
border: 1px solid transparent;
padding: 1px;
}

What's the HTML? Is it a submit button or a text input field? — Boldewyn, May 10 '12 at 16:12
Will you put your sample HTML code here http://jsfiddle.net/ — Jhilom, May 10 '12 at 16:21
If you've solved this problem, please post your solution below as an answer and then "accept" your own answer. — Sparky, May 10 '12 at 18:51

score 4 · Answer 1 · edited May 23 '17 at 12:14

4

Use border: 0px; as it seems more cross browser compatible.

Check this question here question here

Here is an example for you to fix IE7:

http://jsfiddle.net/Z7Uee/

edited May 23 '17 at 12:14

Community

1
1

answered May 10 '12 at 16:36

xivo

2,054
3
22
37

score 2 · Accepted Answer · answered May 11 '12 at 12:53

2

I fixed it by using border: transparent.

.BorderInputNone {
border: 1px solid transparent;
padding: 1px;
}

answered May 11 '12 at 12:53

Thalecress

3,231
9
35
47

Border: none works in IE8 but not IE7?

2 Answers2

Linked