Sign in to follow this  

[web] [solved] IE [6, 7] input black border

Recommended Posts

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;
	font-family:"Trebuchet MS", Ariel, sans-serif;

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. Buttons 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]

Share this post

Link to post
Share on other sites
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".


Share this post

Link to post
Share on other sites
The <button> element behaves in the same way. I would just break down and use an image + javascript--but I wanted to retain functionality when javascript is not available.

I can live with the effect, I guess. I just hope that my boss doesn't notice it. Thanks a lot Microsoft.

Share this post

Link to post
Share on other sites
How about a paragraph tag with a border, bg color and a little padding. Add an on mouseclick event which calls javascript to submit the form (document.form.submit())?

Sounds more like what you want anyway if you aren't looking for a real button....

[edit] Sorry, missed the part where you said you wanted a solution in absence of javascript, 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.

Share this post

Link to post
Share on other sites
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 javascript, 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.

Share this post

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this