Need help to replace the sidebox header background with multi-images

.../MyTemplateName/common/tpl_box_default_left.php
The following Code added:

.../MyTemplateName/css/stylesheet.css
the following code added:
.leftBoxHeaderLeft{
background-image: url(../images/boxHeaderLeft.gif);
background-repeat: no-repeat;
background-position: top right;
height: 24px;
width: 16px;
}
.leftBoxHeaderMid{
background-image: url(../images/boxHeaderRight.gif);
background-repeat: repeat-x;
height: 24px;
}

I made my files images upgraded.
But I found the 2 images(boxHeaderLeft,boxHeaderRight) for the sidebox header are in two rows.
I want the background of the sidebox header compose of multi-images and in the same row.
What exactly did i do wrong?
PS: I'm a newbie to ZenCart and aslo to PHP.
Hope someone give more detail or directs for how to finish that.
Thanks!

Do you have a link to the site?

Oh. And which version of Zen Cart are you using, since there were no sidebox footers from version 1.3 onwards?

the link: http://www.ohiseekyou.com/zencart/
The Server is locat in China.
You may not access it.
I upload the part of screenshot.

My Zen Cart is V1.3.7, the lastest one.
The footer, not exist in V1.3.7, was added later.
And the footer have no business with the Sidebox Header ,I think

If you add float:left to your styles for leftBoxHeaderMid that should bring both divs up to the same level.

However, this is completely unnecessary. You could just use the default Zen Cart code and attach a single background image to the header.

Similarly the work you have done to create a footer div just to add an image to it could have been done more efficiently by just adding the image to the standard sideBoxContent class and giving it a position of bottom.

kuroi:

If you add float:left to your styles for leftBoxHeaderMid that should bring both divs up to the same level.

I do as what you say. But the 2 images are still in 2 rows.
"float:left" only make the image"leftBoxHeaderMid" repeat as wide as the Box Title.
Have a look in my link : http://www.ohiseekyou.com/zencart/

kuroi:

However, this is completely unnecessary. You could just use the default Zen Cart code and attach a single background image to the header.

Similarly the work you have done to create a footer div just to add an image to it could have been done more efficiently by just adding the image to the standard sideBoxContent class and giving it a position of bottom.

leftBoxHeaderMid, the size only 2 * 24 px
leftBoxHeaderLeft, the size 16 * 24 px
I think it is more free to Using multi-images as the Box Header Background when the width of the box changes, then the image leftBoxHeaderMid, can repeat along X freely

OhISeekYou:

I do as what you say. But the 2 images are still in 2 rows.
"float:left" only make the image"leftBoxHeaderMid" repeat as wide as the Box Title.

"float:left", applied in the image "leftBoxHeaderLeft", is OK
but sadly , this is a blank between in the 2 images.
Have a look in my link : http://www.ohiseekyou.com/zencart/

OhISeekYou:

I do as what you say. But the 2 images are still in 2 rows.
"float:left" only make the image"leftBoxHeaderMid" repeat as wide as the Box Title.
Have a look in my link : http://www.ohiseekyou.com/zencart/I've looked in Firefox 2, Internet Explorer 6 and 7 and Opera and the images are on the same level for all of them. Only IE6 has a problem - a 3px gap between the images, which is most likely due to the infamous IE6 3px bug!

OhISeekYou:

leftBoxHeaderMid, the size only 2 * 24 px
leftBoxHeaderLeft, the size 16 * 24 px
I think it is more free to Using multi-images as the Box Header Background when the width of the box changes, then the image leftBoxHeaderMid, can repeat along X freelyHey, if you prefer using 3 images, 3 new divs, 12 additional lines of CSS styling and changes to core Zen Cart code, when you could do it with just 2 images and 2 additional lines of CSS, then that's your choice - though not, I suspect, one that many other designers would make!

OhISeekYou:

sadly , this is a blank between in the 2 images.You are probably looking at the site through one of the older versions of Internet Explorer that have a bug under some circumstances when divs are placed next to each other, especially when one is empty.

kuroi, Thanks for your advices.
"float:left" applied in the Left-image works well except the 3px bug, not in the Mid-image

BTW, your site "http://(sorry, site offline)" is wonderful. I like it!
but there seem to some bugs in the beautiful template "Flower" in IE6.

1. the line was not showed correctly
2. Under the thumbnail, only price was showed

Thank you for the kind comments about the template site. The purpose of that site is to display the templates that are available for free from this support site in exactly the state that a Zen Cart user would get them from this site - bugs and all.

So I have a policy of not amending the template even when I know that there are problems with them, although if the errors are major, and the template is supported, I do warn the authors. In the case of flowers I think that there are other minor problems too, but the template does not appear to be supported, so I guess it would be up to each user to fix the problems. :(