Rounded corner effect not rendering as expected

HTML & CSS
1

Hey all,

I have these three images:


http://i54.tinypic.com/e5pl3t.png

THis right here will reveal the left corner but not the right corner:


<style>
 
	#box {
		background: url(left-button.png) no-repeat top left;
		padding-left: 6px;
	}

	h1 {
		background:   url(right-button.png) no-repeat top right;
  		font-size: 20px;
   		line-height: 1.5;
		color: #fff;
		text-align: center;
 	}
	
	a {
		display: block;
		width: 345px;
		height: 30px;
		background: url(blue-button-repeat.png) repeat-x;
		text-decoration: none;
   	}
</style>
 
		
		<div id="box">
			<a href="#">
				<h1>Manage Categories and Services</h1>
			</a>
		</div>

The code below works but this is nothing but slop. I had to create an extra element and the left and right side aren’t clickable because it expands beyond the width of link:


<style>
 
	#box {
		background: url(left-button.png) no-repeat top left;
		padding-left: 6px;
		width: 351px;
	}

	#inner {
		background: url(right-button.png) no-repeat top right;
		padding-right: 6px;
 	}
	
	a {
		display: block;
		width: 345px;
		height: 30px;
		background: url(blue-button-repeat.png) repeat-x;
		text-decoration: none;
   	}

	h1 {
		font-size: 20px;
   		line-height: 1.5;
		color: #fff;
		text-align: center;
	}
</style>
 
		
		<div id="box">
			<div id="inner">
				<a href="#">
					<h1>Manage Categories and Services</h1>
				</a>
			</div>
		</div>

Any idea how to make this work right?

Thanks for response.

2

This isn’t hard to do, but given that you’ve got a fixed width on the link anyway, you might as well just use a single background image.

Also, you need to organize the code like this, with the link inside the H1:

<h1><a href="#">Manage Categories and Services</a></h1>

It’s not valid code to have it the other way around.

3

I think I got what I want now:


<style>
 
	#box {
		background: url(left-button.png) no-repeat top left;
		padding-left: 6px;
		width: 351px;
	}

 
	a {
		display: block;
		background: url(blue-button-repeat.png) repeat-x;
		text-decoration: none;
		color: #fff;
   	}

	h1 {
		background: url(right-button.png) no-repeat top right;
		padding-right: 6px;
		font-size: 20px;
   		line-height: 1.5;
		text-align: center;
	}
</style>
 
		
		<div id="box">
 			<h1>
				<a href="#">Manage Categories and Services</a>
			</h1>
 		</div>
4

No, definitely not. The first thing to do is reverse the H1 and the <a>.

Then here’s one way you could set it up:


<!DOCTYPE html>
<html lang="en">

<head>

<meta charset="utf-8">

<title>Experiment</title>
	
<style type="text/css" media="all">

h1 {
  background: url(left-button.jpg) no-repeat top left;
  color: #fff;
  text-align: center;
  padding-left: 7px;
  font-size: 20px;
  line-height: 1.5;
}
	
a {
  display: block;
  background: url(right-button.png) no-repeat top right;
  text-decoration: none;
  height: 30px;
  padding-right: 7px;
}

h1 a span {
  background: url(blue-button-repeat.png) top left;
  display: block;
}
</style>
	
</head>

<body>

<h1><a href="#"><span>Manage Categories and Services</span></a></h1>
			
</body>

</html>