6

Does anyone know why IE6 and IE7 add a white border between a button border and the background?

Here is my CSS and HTML:

#reportButton{
    background:#fefcda url(buttonback.png) repeat-x bottom left;
    border-top:2px solid #fffff8;
    border-right:2px solid #e3b40c;
    border-bottom:2px solid #e3b40c;
    border-left:2px solid #fffff8;
    color: #373535;
    font-weight: bold;
    margin:0 2%;
    width:45%;
}

<button id="reportButton">Report a Concern</button>

If you try this, you will see a funny white border between the borders and the background. This does not appear in any other browser, not even IE8.

Anyone have a simple fix or suggestion as to what I'm doing wrong?

Thanks!

EDIT: I just noticed that when I click on the button, the marching ants come up and the white border disappears. It seems as though when the button is :active they disappear, although this doesn't help me much in terms of solving the problem, maybe it will for someone else.

Also, sorry I cannot provide a screen; I have no place to upload it now via this internet connection.

EDIT2: It actually appears that the border is not white but the background-color of the button. It appears IE is leaving a 1px gap between the button border and the button background image.

10
  • Are you using a reset.css? Guessing that would probably fix this but unable to test right now.
    – heisenberg
    Jul 6, 2010 at 19:28
  • @kekekela: I'll try right now. EDIT: That didn't work either...
    – tau
    Jul 6, 2010 at 19:29
  • Ah, sorry bud. =/ I'll take a look at it when I get home tonight if you haven't figured it out by then.
    – heisenberg
    Jul 6, 2010 at 19:34
  • I tried the code you have above (in appropriate places -- IE, the CSS in a style tag, the button in the body tag), on a black background, in IE6, 7 and 8 (using IETester, admittedly). Could not replicate the described behavior, no unusual border around the button in any of them. What DOCTYPE are you using, if any?
    – John Rudy
    Jul 6, 2010 at 19:34
  • 1
    @tau: I was afraid that might be the case. Sorry, bud. :(
    – John Rudy
    Jul 6, 2010 at 22:53

2 Answers 2

4

I had the same problem...neat trick that seems to work at least for IE: The "white" outline is actually the background color of your image. So set this to be the same as your border color. If you don't mind a slightly-thick-ish border, stop there. If the border is now too thick, set your border color to the background color of the page.

e.g. to display a black "border" use this css for your button: background: url(./button_bg.gif) no-repeat; background-color:#000000; border: 1px solid #FFFFFF;

1
  • Didn't originally ask the question but this solution worked for me. I've been wondering for ages what that white border is for. Thanks! Nov 17, 2011 at 2:48
1

Make sure that that border is not coming from the image itself (background of the image), set the accurate width and height, also try setting the padding to 0 like @SLaks said.

1
  • I just tried all of those (and various combinations of those) and none of them got rid of it.
    – tau
    Jul 6, 2010 at 19:34

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.