I want to place a styled box with rounded corners around text in a heading.
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.
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">
<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%;


<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 style="margin: 50px; width: 300px;">
 <div class="specialHeader"><h2><span><em>This Has<br />Three<br />Lines</em></span></h2></div>


you'll have to create three 'slices' of an image. a top, middel and bottom, where the top and bottom is a set size and the middel is repeated-y.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, learning, and sharing knowledge.