IE applying it's own border outside a CSS defined border

[wienerdog]

I defined a 1px solid border with color #3C6CA7 on a class used on an input button and it looks fine in Firefox, but IE seems to be putting it's own 1px black border outside my CSS-defined border. This also has a background image applied, and I've attached screen shots of each.

Does IE require a hack to remove this black border that it's displaying? I can't figure out where it's coming from.

[shalom_m]

Without the relevant html/css I can't comment further.

[JPnyc]

If you have a link around an image (I can't tell from the screenshot if you do) IE automatically puts a border around it.

[pixelbliss]

Is this part of the reasoning behind using CSS Reset files? If you wanna Google that you'll see what I mean - I know some use them to handle browsers that randomly set such things by default.

[wienerdog]

HTML:

<input id="btnLogin" class="progressive" type="submit" style="margin: 2px; float: none;" tabindex="3" language="javascript" onclick="return HandlePassword();WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("btnLogin", "", true, "", "", false, false))" value="Login" name="btnLogin"/>


I have CSS that's applied to all inputs, and specific CSS that applies to this class. Neither has the black border that appears outside the blue border in IE.

CSS:

input {
padding: 3px;
border-width: 1px;
border-color: #F2882B;
font-size: larger;
}


input.progressive {
position: relative;
float: right;
background-image: url(/images/selectorButton_gre-wh.gif);
background-repeat: repeat-x;
background-position: center bottom;
border-width:1px;
border-color: #3C6CA7;
background-color: #fff;
border-style:solid;
color: #5396EA;
margin: 5px;
padding-left: 15px;
padding-right: 15px;
padding: 5px 15px 5px 15px;
font-size: larger;
cursor: pointer;
}

[bazman]

ie automatically puts a blue border on images with links. I know ou have it set as a background in css, but try code below

I always start off by zeroing all margins and padding, removing borders and outline.

* {
margin: 0;
padding: 0;
border:0;
outline:0;
}

I zero all outlines coz you get a dotted outline when clicking links and it bugs me. Otherwise try using

img {
border:0;
}

Also you seem to have set the padding twice for left and right?

Hope this helps

[bazman]

Ignore my last post, it's not the border effect, seems to be when you click onto desktop i.e. outside ie window, the border dissapears. Very strange, will keep looking into it.

[bazman]

Changing the input type to button instead of submit seems to get rid of black outline but it appears when you click on it

[shalom_m]

IE seems to automatically put in a link border [Thank you Bill, no one asked you to do that!]
You could get rid of it by including border-width: 0px; on your style="margin: 2px; float: none;" line. This however gets rid of all borders. I managed to work around that a few months ago - (have to find the right site I did it in).
Alternatively, you could include the border line in your selectorButton_gre-wh.gif graphic.

[wienerdog]

IE seems to automatically put in a link border [Thank you Bill, no one asked you to do that!]
You could get rid of it by including border-width: 0px; on your style="margin: 2px; float: none;" line. This however gets rid of all borders. I managed to work around that a few months ago - (have to find the right site I did it in).
Alternatively, you could include the border line in your selectorButton_gre-wh.gif graphic.
Huh, that's annoying. Yeah, if I set the border-width to 0, I lose the light blue border I want. So I get either a light blue border with unintended black border outside of it, or none. I would prefer to not put it in the image. Bizarre that it's not happening to other submit button inputs that I have...

[JPnyc]

Put border ="0" inside the tag.

[shalom_m]

Tried that too - in fact it was the first thing I tried.
It gets rid of all the borders.

[The_Black_Knight]

What if you were to try applying the 0px border attribute to the "link" selector. For example: a: link {border=0}

Then, you could apply the border to the image. I'm not sure if that will work, but it's worth a shot.

[wienerdog]

Well, it seems that this is an issue of the input's "outline" property. I could do a pseudo class for the tag in CSS, so that when the button is highlighted through tabbing, or clicking on the page. I could doing something like:

input:focus {
outline: 0px;
}

IE doesn't naturally recognize the :focus pseudo class, but this JavaScript will make it work: http://www.htmldog.com/articles/suckerfish/focus/

But apparently IE doesn't recognize the outline property.
Soooo... anyone know if there's Javascript that will remove the outline border?