the problem I am having is getting the centre image to display. when I change the code to

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<link href="button.css" rel="stylesheet" type="text/css" />
<style type="text/css">
  #programl { background: url(../img/programs_hover_l.jpg) no-repeat left; float:left; height: 34px; padding-left: 5px;}
 .programr { background: url(../img/programs_hover_r.jpg) no-repeat right; float:right; height: 34px; padding-right: 5px;}
 .programc { background: url(../img/programs_hover_c.jpg) repeat-x; height:34px; width:400px;}
 #text{ font-size:20px; font-family: Arial, Helvetica, sans-serif;}
  </style>
</head>

<body>
<div id="programc" class="programl"><a href="" class="programr" id="text"></a></div>
</body>
</html>

the centre image displays but the left image will not display and when I change to this

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<link href="button.css" rel="stylesheet" type="text/css" />
<style type="text/css">
  .programl { background: url(../img/programs_hover_l.jpg) no-repeat left; float:left; height: 34px; padding-left: 5px;}
 .programr { background: url(../img/programs_hover_r.jpg) no-repeat right; float:right; height: 34px; padding-right: 5px;}
 #programc { background: url(../img/programs_hover_c.jpg) repeat-x; height:34px; width:400px;}
 #text{ font-size:20px; font-family: Arial, Helvetica, sans-serif;}
  </style>
</head>

<body>
<div id="programl" class="programc"><a href="" class="programr" id="text"></a></div>
</body>
</html>

The left shows up and the centre does not show up why?

Hi, on this div <div id="programl" class="programc"> you have given if an id and a class, the id is telling it to show one background image and the class another, it can't show both. The styles are also the wrong way around, in your styles you put programe1 as a class and programc as an ID. To show all 3 images you are going to need three elements to style, maybe put a strong tag within your a tag, something like this:
<div class="programl"><a href="#" class="programr"><strong id="programc"></strong></a></div>
I would remove the text ID and put those styles within your strong or a tag, if you don't want to have bold text just reset it within the styles. I have put an example below, it's not perfect and will need some tweaking but will give you a start:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<link href="button.css" rel="stylesheet" type="text/css" />
<style type="text/css">
.programl { background: url(img/programs_hover_l.jpg) no-repeat left; float:left; height: 34px; padding-left: 5px;}
.programr {
    background: url(img/programs_hover_r.jpg) no-repeat right;
    float:right;
    height: 34px;
    padding-right: 5px;
    color: #FFF;
    text-decoration: none;
}
#programc {
    background: url(img/programs_hover_c.jpg) repeat-x;
    height:34px;
    width:400px;
    display: block;
    font-size:20px;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: normal;
    text-align: center;
}
</style>
</head>

<body>
<div class="programl"><a href="" class="programr"><strong id="programc">Here is my link</strong></a></div>
</body>
</html>

You will probably need to reset your image paths to eg ../img/programs_hover_c.jpg

Wrap your codes with code tag, that is providing on the toolbar with the button (CODE).

ok will do - didn't see that!

Member Avatar
diafol

As louilly states, you can't have more than one background in some browsers (<IE9 - I think). If you want to implement multiple backgrounds (all major browsers):

#programl {
background-image: url(../img/programs_hover_c.jpg), url(../img/programs_hover_l.jpg);
background-position: center, left;
background-repeat: repeat-x, no-repeat;
}

I wouldn't know where to start with your float and width though as you're trying to place these on to a single item (#program1), so it doesn't make much sense to me.