Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Westi on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Styling buttons

Status
Not open for further replies.
JontyMC

JontyMC

Programmer
Nov 26, 2001
1,276
GB
I want the text in my button to be flush with the edge of it. However, auto width seems to be set with default amount of padding. How can I get round this (I have to use a button)?
 
Sort by date Sort by votes

Try giving your button a class of "noMargin":

Code: 
<input type="button" class="noMargin" value="123" />

or

<button class="noMargin">123</button>

and have this in your style sheet:

Code: 
.noMargin {
   margin: 0px;
   padding: 0px;
}

Hope this helps,
Dan



The answers you get are only as good as the information you give!

 
Upvote 0 Downvote
I should've worded it a bit better. I have set margin and padding to 0 already, but there is still "padding". This seems to be inherent in the auto width.
 
Upvote 0 Downvote
OK. I'm looking for code that makes the text of the button flush with the edge of the button. This doesn't work:
Code: 
.mybutton {margin:0;padding:0;}
As I said, I think its because the auto width setting of the button includes a certain amount of space either side of the text almost as though the value is " mytext " (note the spaces).
 
Upvote 0 Downvote
Its actually an xform, so its tied to being of type <input type="button">
 
Upvote 0 Downvote
I don't want/can't use an image. I have several buttons in a line that are used to navigate through pages in a form. The styling means I have to have the text flush with the edge of the button. Is this possible?
 
Upvote 0 Downvote

It looks like in IE, under Win XP, that the OS stops you shrinking the padding past a certain point. You may not be able to do what you're after in those cirumstances.

If you don't mind me saying, text that is absolutely flush with the button edges would generally be less legible than text with a bit of space around it, anyway - which is probably why this restrcition has been put in place. I don't think they look too bad at all with the default padding.

Dan


The answers you get are only as good as the information you give!

 
Upvote 0 Downvote
OK, cheers. I'm redesigning a site using xforms and need to get the styling as close as possible to the original. I'll guess I'll have to make do with slightly more padding.
 
Upvote 0 Downvote
I got rid of the right padding... Maybe someone else can get rid of the left padding. Have a nice day!

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml"[/URL] xml:lang="en" lang="en">
<head><title>Buttons</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
</head><body><form action="#">
<input type="button" value="this" 
 style="font-family:monospace; position:relative; left:-15px" />
<input type="button" value="is" 
 style="font-family:monospace; position:relative; left:-27px" />
<input type="button" value="just" 
 style="font-family:monospace; position:relative; left:-35px" />
<input type="button" value="a" 
 style="font-family:monospace; position:relative; left:-50px" />
<input type="button" value="joke" 
 style="font-family:monospace; position:relative; left:-60px" />
</form></body></html>

Clive
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

pendle666
  • Locked
  • Question
contact form buttons not right on iPhone 4 HTML/CSS 2
Replies
9
Views
260
pendle666
pendle666
famfam
  • Locked
  • Question
Styling Link using Css.
Replies
7
Views
79
vacunita
vacunita
Geates
  • Locked
  • Question
CSS link styling problem 1
Replies
2
Views
38
Geates
Geates
pumpkin05
  • Locked
  • Question
Drop Down Menu styling
Replies
1
Views
30
darryncooke
darryncooke
officemanager2
  • Locked
  • Question
buttons look like steps in IE 1
Replies
2
Views
104
officemanager2
officemanager2

Part and Inventory Search

Sponsor

Back
Top