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]

Thanks. That works when the button receives focus--so that's good. However, when the text input has focus, it still draws a line around the submit box. It's very strange--but it seems like it's IE's way of telling the user "this is the button to push to submit the form".

Weak.

The <button> element behaves in the same way. I would just break down and use an image + &#106avascript--but I wanted to retain functionality when &#106avascript is not available.<br><br>I can live with the effect, I guess. I just hope that my boss doesn't notice it. Thanks a lot Microsoft.

How about a paragraph tag with a border, bg color and a little padding. Add an on mouseclick event which calls &#106avascript to submit the form (document.form.submit())? <br><br>Sounds more like what you want anyway if you aren't looking for a real button....<br><br>[edit] Sorry, missed the part where you said you wanted a solution in absence of &#106avascript, but the above should fix that border highlighting problem. You could also use the 'cursor' property to make the pointer turn into a button click icon instead of the text selection icon.

Thanks for the suggestion, ju2wheels. I was able to come up with a solution using my existing semantic markup (which is the reason I am so restrictive about the use of &#106avascript, etc).

It's not The Best(tm) solution by any means, but it did make the black border go away.

Since the button has to exhibit the two-tone stroke border, I had to use a background image anyway. Otherwise, I would have to introduce a <span> or some other element to attach the secondary border to (which in this case is not an option).

If you set the element's border-width to 0px, then the black border will not be drawn. The drawback is, of course, it has no border at all!

By adding the border to my background image, the button now looks as it should and does not exhibit the black border effect in IE.