asked on

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

wilson1000

Does the black border appear onfocus or all of the time?

VBpassion

ASKER

all the time. u can copy my code and see it yourself, u might understand it better.

Thanks

wilson1000

You must place this button within a form element, this fixes the problem.

wilson1000

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

VBpassion

ASKER

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

VBpassion

ASKER

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

wilson1000

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

VBpassion

ASKER

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

wilson1000

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.

VBpassion

ASKER

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

ASKER CERTIFIED SOLUTION

VBpassion

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial