I want to place a styled box with rounded corners around text in a heading.
[IMG]http://d9qjx79zqpo3.googlepages.com/h2Goodz.gif[/IMG]
The problem is that the the heading may have one, two or three lines and I can't seem to get my box to adjust.
[IMG]http://d9qjx79zqpo3.googlepages.com/h2Badz.gif[/IMG]
Here is my code:
I appreciate any help you can provide!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Title</title>
<style type="text/css" media="all">
.specialHeader {
background: #F4F1F1 url(http://d9qjx79zqpo3.googlepages.com/specialHeadingA.gif) no-repeat scroll 0 0;
padding: 1px 0 0 0;
}
.specialHeader h2 {
display: block;
margin: 10px 0 0 0;
padding: 0 0 0 10px;
background: transparent url(http://d9qjx79zqpo3.googlepages.com/specialHeadingA.gif) no-repeat scroll 0 100%;
}
.specialHeader span {
display: block;
margin: 0;
width: 100%;
padding: 1px;
background: transparent url(http://d9qjx79zqpo3.googlepages.com/specialHeadingB.gif) no-repeat scroll 100% 0;
}
.specialHeader em {
text-transform: uppercase;
display: block;
text-style: normal;
margin: 10px 0 0 10px;
padding: 0;
font-size: 18px;
font-family: 'Trebuchet MS', Tahoma, sans-serif;
color: #98002E;
font-weight: 300;
background: transparent url(http://d9qjx79zqpo3.googlepages.com/specialHeadingB.gif) no-repeat scroll 100% 100%;
}
</style>
</head>
<body>
<div class="specialHeader"><h2><span><em>Hello World</em></span></h2></div>
<div style="margin: 50px; width: 600px;">
<div class="specialHeader"><h2><span><em>Two<br />Lines</em></span></h2></div>
</div>
<div style="margin: 50px; width: 300px;">
<div class="specialHeader"><h2><span><em>This Has<br />Three<br />Lines</em></span></h2></div>
</div>
</body>
</html>
