Your attachment is still pending but you can use the sprite techniue: just create one image and place the different states, using positioning. It doesn’t matter if it’s vertical or horizontal:
Take a look here
I believe we covered this in this thread a while back ago 
WOW!!! what a mess!!!
??? What are you referring to?
The CSS!! That’s some nasty gnarly looking CSS. I would imagine you could rewrite the entire page quicker than you could even begin to sort out that mess of position:relatives and other hap-hazard styling.
Don’t get me wrong, position:relative definitely has it’s place (I use it on a regular basis), but by looking at this script the creator didn’t realize what it’s actual intended use was (ie, they used it for everything).
I’d suggest starting over, build a solid template html/css and go from there. You will spend more time fighting this current code than you would just starting from scratch.
Ah, i thought you were referring to my reply
The OP already decided to rewrite
I am rewriting everything but since my CSS coding skills are still not very good, I am stuck. There are many elements that I am fighting with. The top has the logo to the left and an image to the right. Each page has a different right image. Without using position:relative how do I get this to work? I have thought about just doing a different heading for each page using the different images for each page heading but that is probably the easy way out. I have uploaded all I have so far to www.foxdenwebsolutions.com/artform/index1.html and www.foxdenwebsolutions.com/artform/css/artform.css. This has to look exactly like http://artformsigns.com.
Ok things are coming along. I am still having trouble with the top right image. On Firefox it is a couple of pixels over from the right edge but on IE8 it fits perfectly. How can I fix this? Also there is supposed to be a gray bar below the nav bar. I have the code on the index and CSS page but it is not showing up. I have the bottom gray bar ok. Code has been uploaded to the same link as above.
OK, I came in to this thread late. And it does sound like a mess, but i think I have an answer as tho what you WANT to do ( though I am not sure if it is what you should do). This, I gathered from your original post…
<div id=“page 1 or 2 or 3, etc”>
if he has it set up that way. you could copy-paste all CSS all document into one document. Before you do that however, add “#page1” or 2 or 3, etc… in front of each rule.
So it would be: .nav ul{} to #page1 .nav ul.
you can even save a div, and remove <div id=“page 1 or 2 or 3, etc”>, and simply use <body id=“page 1 or 2 or 3, etc”>.
Now as to why you SHOULD put the effort into manually concatenating all rules:
What I described above is a very quick an accurate solution, but does not address the bandwidth issue. The first page load will be loading the style sheet for all 13 pages, all at once even if the user never hits but one or two of the pages in the site. Another thing I personally hate is to have to scroll though massive style sheets to find one rule… you and you will have made a 13x long style sheet.
Thanks Dresden but what I am actually doing is rewriting all the CSS. That way I can not have to depend on so many position: relative coding.
I spoke with the client today and she doesn’t mind the “content” section of the site to be changed around. I was thinking about doing 2 or 3 columns on the “content part” to space things out properly.
I have already redone the menu bar to a Sprite menu bar and it seems to be working ok.
I just can’t figure out why the top right image won’t line up properly and am considering making the top section all one header image with the different right images for each page header.
Hi,
Your getting caught up in the same layout methods used in the original site.
The reason the right image won’t line up is because you have absolute positioned it and the containing-block is the body element. It could have been fixed by setting position:relative; on the #container to establish it as the containing block.
You will be better off though by just floating both the #logo and the #indextopimage. Then clear those two floats on the #navbg.
Have a look through the FAQ to learn more about floats. 
#logo {
[COLOR=Blue]float:left;[/COLOR]
width:100px;
height:132px;
[COLOR=Blue]margin-left: 65px;[/COLOR]
[COLOR=Blue]display:inline;/*IE6 margin bug*/[/COLOR]
background: url(/../images/artlogo.gif) no-repeat;
}
#indextopimage {
[COLOR=Blue]float:right;[/COLOR]
width:500px;
height:132px;
background: url(../images/topimgindex.jpg) no-repeat;
}
#navbg {
[COLOR=Blue]clear:both;[/COLOR]
width: 945px;
height:24px;
background-image: url(../images/redbar.gif);
background-repeat: repeat-x;
}