[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

CSS: Unwanted Black border on Submit button

Posted on 2008-11-19
11
Medium Priority
?
3,436 Views
Last Modified: 2012-05-05
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

0
Comment
Question by:VBpassion
  • 6
  • 5
11 Comments
 
LVL 4

Expert Comment

by:wilson1000
ID: 22996738
Does the black border appear onfocus or all of the time?
0
 
LVL 1

Author Comment

by:VBpassion
ID: 22996966
all the time. u can copy my code and see it yourself, u might understand it better.

Thanks
0
 
LVL 4

Expert Comment

by:wilson1000
ID: 22996998
You must place this button within a form element, this fixes the problem.
0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 4

Expert Comment

by:wilson1000
ID: 22997033
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
 
LVL 1

Author Comment

by:VBpassion
ID: 22997036
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
 
LVL 1

Author Comment

by:VBpassion
ID: 22997109
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
 
LVL 4

Expert Comment

by:wilson1000
ID: 22997306
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
 
LVL 1

Author Comment

by:VBpassion
ID: 22997335
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
 
LVL 4

Expert Comment

by:wilson1000
ID: 22997413
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
 
LVL 1

Author Comment

by:VBpassion
ID: 22997479
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
 
LVL 1

Accepted Solution

by:
VBpassion earned 0 total points
ID: 23132746
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

Featured Post

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

So you have coded your own WordPress plugin and now you want to allow users to upload images to a folder in the plugin folder rather than the default media location? Follow along and this article will show you how to do just that!
CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
In this Micro Tutorial viewers will learn how to create a CSS image sprite (In a later tutorial, viewers will learn how to use CSS and HTML to create a navigation menu using this sprite) Open a new Photoshop document with a width of (Icon width)x(N…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
Suggested Courses

834 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question