CSS: Unwanted Black border on Submit button

Hello All
Im making a button based on css, everything is fine except there is a stupid black border which some, and i have no clue how to get rid of it.

This happens only in IE, not in FF.

please see the attached code. Just copy and paste and u will see it. Just get me rid of the black border.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
</head>
 
<body>
<style type="text/css">
/* BUTTONS */
 
.buttons a, .buttons button{
    display:block;
    float:left;
    margin:0 7px 0 0;
    background-color:#f5f5f5;
    border:1px solid #dedede;
    border-top:1px solid #eee;
    border-left:1px solid #eee;
 
    font-family:"Lucida Grande", Tahoma, Arial, Verdana, sans-serif;
    font-size:100%;
    line-height:130%;
    text-decoration:none;
    font-weight:bold;
    color:#565656;
    cursor:pointer;
    padding:5px 10px 6px 7px; /* Links */
}
.buttons button{
    width:auto;
    overflow:visible;
    padding:4px 10px 3px 7px; /* IE6 */
}
.buttons button[type]{
    padding:5px 10px 5px 7px; /* Firefox */
    line-height:17px; /* Safari */
}
*:first-child+html button[type]{
    padding:4px 10px 3px 7px; /* IE7 */
}
.buttons button img, .buttons a img{
    margin:0 3px -3px 0 !important;
    padding:0;
    border:none;
    width:16px;
    height:16px;
}
 
/* POSITIVE */
 
button.positive, .buttons a.positive{
    color:#529214;
}
.buttons a.positive:hover, button.positive:hover{
    background-color:#E6EFC2;
    border:1px solid #C6D880;
    color:#529214;
}
.buttons a.positive:active{
    background-color:#529214;
    border:1px solid #529214;
    color:#fff;
}
 
</style>
<div class="buttons">
	<button class="positive" type="submit">SAVE & CONTINUE</button>
</div>
</body>
</html>

Open in new window

LVL 1
VBpassionAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

wilson1000Commented:
Does the black border appear onfocus or all of the time?
0
VBpassionAuthor Commented:
all the time. u can copy my code and see it yourself, u might understand it better.

Thanks
0
wilson1000Commented:
You must place this button within a form element, this fixes the problem.
0
Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics – known as key performance indicators (KPIs) – for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

wilson1000Commented:
Sorry,

Explanation - The <button> tag is a versatile element to use instead of 'submit' or 'input' (XHTML only) and therefore should only be used with <form>.

Many thanks
0
VBpassionAuthor Commented:
I did that earlier, but it still comes when i press it (onfocus). if i click the mouse on the page which mean if i loos the focus from the button then the border goes off, but again onpress or onfocus it appears aggain.

Thnaks for your quick response though
0
VBpassionAuthor Commented:
Hello Wilson,,
Thank a million for your great suppot and sharing the knowledge. I had tried that earlier.But may I give you the reference for the the kind of button which I intend to do using this css is just like Facebook.

The facebook login button is what im ultimately intending to have. Can you help me to get the exact look and style of facebook. You help and cooperation would be highly appreciated.

kindly see the attached picture of the facebook login. There are other css on the net which makes same styles, but they are not for submit buttons. i want to use this button on a form which would post plently of data. So i only need submit button.
facebook.gif
0
wilson1000Commented:
The reason onfocus was in my first question is because IE has an annoying way of putting this border on.

As far as i'm aware, there isn't a cure with CSS as IE is rubbish at supporting it. You could accomplish this with javascript by accessing the DOM and changing the value for the border.

The image above already has a black border on it, IE will show the button just as FF or anyother browser.

The way facebook achieve this is by repeating the blue image below in the background and place the white text ontop, this is done in an input tag.




UILinkButton-Blue.png
0
VBpassionAuthor Commented:
Ok so i need to do the same thing, can u please help me to get the same style and effect. SO what would be the CSS, can u plz provide me the solution
0
wilson1000Commented:
I'm really sorry VBpassion, i can't help with a solution to the extent you need as this would take too much of my time. You should increase your point value to a more suitable level and Experts may write the code for you.

I had hoped i offered enough information for you to proceed.

Good luck.
0
VBpassionAuthor Commented:
Oh ok no probs mates, how much points do u need to get me the exact solution. its ok. You are absolutely right, work should be rewarded. It would be wrong on my part if I dont reward appropriately.
Just tell me hwo many points do u need to provide me with right soltions
0
VBpassionAuthor Commented:
Well,
since nobody  could get what i was asking, i tried hell lots of trick and googled all around and thought to come post the most closest trick rather then going deep into DOM. the best work around is the excapsulate the button in the span and give the rolloer and backgound color with NO borders, this will eliminate the black border created by the IE
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.