CSS: Display:Block + Width:Auto

HTML & CSS
1

Hi Guys,

I am trying to simulate a button using CSS,

I want the hyperlink to have padding on all 4 sides, but I want the block to only be as wide as the text plus the padding. I thought that width:inherit would work with display:block but it does not.

Any Idea’s?

a.button:link, a.button:visited {
		background-color:#ff9900;
		color:#FFFFFF;
		font-weight:bold;
		border-left:2px solid #EFA96C;
		border-top:2px solid #EFA96C;
		border-right: 2px solid #AE5C13;
		border-bottom:2px solid #AE5C13;
		display:block;
		font-size:1em; margin:5px;
		text-decoration:none;
		padding:10px 10px 10px 10px;
		width:50px;
		text-align:center;
	}
	a.button:hover {
		text-decoration:underline;
	}

<a href="#" class="button">Go</a>
2

try:

  • Get rid of the width: 50px
  • change display to inline-block
3

If you really need to have them displayed as block elements, then consider putting them in a list:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
	<head>
		<title>Test</title>
		<style type="text/css" media="all">
			a.button:link, a.button:visited {
				background-color: #f90;
				color: #fff;
				font-weight: bold;
				border-left: 2px solid #efa96c;
				border-top: 2px solid #efa96c;
				border-right: 2px solid #ae5c13;
				border-bottom: 2px solid #ae5c13;
				font-size: 1em;
				margin: 5px;
				text-decoration: none;
				padding: 0.7em;
			}
			a.button:hover {
				text-decoration: underline;
			}
			li {
				height: 3em;
			}
		</style>
	</head>
	<body>
		<p>Lorem</p>
		<a href="#" class="button">Go</a>
		<a href="#" class="button">Stop</a>
		<p>Ipsum</p>
		
		<ul style="list-style: none; padding: 0; margin: 0">
			<li><a href="#" class="button">Go</a></li>
			<li><a href="#" class="button">Stop</a></li>
		</ul>
	</body>
</html>
4

Hi xangelusx, thanks for the responces …

I went with the inline-block solution except it does not work in IE5, is there a reaosn for this?

Thanks

5

Off the top of my head, maybe inline-block isn’t supported in IE 5. You can try just leaving the display attribute undeclared, which will make it the default “inline” and should achieve the same effect.