Yesterday, during I worked on PSD to XHTML conversion, I had a problem with input button under Internet Explorer 6 & 7. Both IE render white border inside button.
Actually I had this problem many times, but was unable to find a solution. So today I played with css and I solved it. Actually it’s not a border, but background color. So, if you have white, black, green or whatever color border inside input button, this probably is the background.
Here is css that I had before fixing this problem:
width: 86px;
height: 29px;
text-align: center;
color: white;
border: 1px solid #ffa200;
background: url(images/search-btn-bg.png) 0 0 repeat-x;
I added background color to background property
background: #e3b100 url(images/search-btn-bg.png) 0 0 repeat-x;
… and voila, it works.
mh I have the same error, but my button has a gradient. so i can’t take a background-color. i have no idea
andré,
my button also have a gradient as background image. Post a link here and I’ll take a look.
WOW! It does excellent, I had problems with it in a long time, now I found solution =)
Thanks!
Nice post, thanks much for sharing.
Thank you very much!!
Found it very hard to find a “solution” until I found this 
GRACIASSSSSSSSSSSSSSSSSSSSSSSSSSSSSSS
Hello,
For the gradient image guys here is a workaround (again this may not work if container div of buttons has gradient):
Apply a seperate stylesheet for the relevant IE’s then give the border the colour of the outer region the same colour as the div it is contained in (my central column background colour is white), then using the solution above give the background colour your border colour.
Hope it helps
Kind regards
Yes ! yes!!, you saved my life. It works dude
Thats a lot. It worked.
@Paul Quinn: Why bother ?
In browsers able to understand CSS normally, just define your background picture (radient or whatever) with a 1px border, as you always do :
input[type="submit"] {
background: url(“img/button.jpg”) repeat-x;
border: 1px solid #3B3B3B;
}
We know that if we leave it this way, IE7 will add an extra 1px coloured by the background color, which defaults to white. If we remove our own border, it will remove that extra pixel. So let’s think :
/** This is applied to IE7 only, with conditionnal comments **/
input[type="submit"] {
background-color: #3B3B3B; /** the color of our original border **/
border: 1px solid transparent; /** we have a border, so the extra pixel will stay, and the border is invisible **/
}
You’re welcome.