Internet Explorer provides an additional border to any BUTTON element in the page if you don’t explicitly assign a 0px border to it. i have a bunch of buttons on a design that I’d like to have a 1px #fff border on. Unfortunately, with the additional border that IE adds, it looks horrible.
The solution was to add a span around the button:
1 2 3 4 5 6 | button { border: 0px; } .button { border: 1px solid #fff; } |
1 | <span class="button"><button>My Button</button></span> |
Good catch. I’ll be adding this to my future reset stylesheets.
Doesn’t quite work with buttons using the sliding doors method.
Search
It’s fine in WebKit/Mozilla, but I still get that damned border on the active state! We tried wrapping it in a span like you do, but it’s still a no go.
@Benxamin: What versions of browser are you using?
IE 6, IE 7 and IE 8 (running in compatibility as 7).
We fixed it by adding another SPAN just inside the button. The first child of the BUTTON tends to receive the focus, so you can mask the effects with the styles on the second child.
BUTTON begin-door
SPAN (receives IE focus so your door doesn’t get the border)
SPAN end-door
TEXT
/SPAN
/SPAN
/BUTTON