Hi all,
I'm running in to a styling issue with IE6 and IE7's implementation of the <input> element.
<input type="submit" name="submit" id="inpSubmit" value="Go" />
Is the HTML, and there is CSS to go along with it.
input#inpSubmit {
background:#ffffff url(btn-search-go.gif) no-repeat scroll 50% 50%;
border:1px solid #990000;
color:#ffffff;
font-family:"Trebuchet MS", Ariel, sans-serif;
font-weight:bold;
line-height:22px;
position:absolute;
right:0px;
top:0px;
margin:0;
padding:0;
width:30px;
height:24px;
}
The button looks the same visually in my target browsers. However, in IE6 and IE7 the element gets a black border added to it when it has focus or elements in my form have focus. It's 1px wide, and it pushes in the existing red border, which obscures the background image of the button. In short: it looks bad.
I Googled this with a few different queries, but I can't find a solution to this exact problem.
I've tried setting up rules for :focus and :active, but none of them have any effect on the black outer border that IE adds.
Any ideas?
[Edited by - Maxamor on February 29, 2008 5:38:18 PM]