& is the HTML code used to display/print an ampersand symbol in the browser window.
%26 is the URL code used when an ampersand needs to be transmitted within a URL string.
A handy URL encoding reference chart can be found here.
I gave that code a test and I attached an image of what it looks like. It looks like this on all browsers.
In the place where it says listOne item, right now, will need to be an image. So will the rest of the greybox need to be moved over or can that be a part of the greybox?
We have to wait for the image to be approved. Or, you could post the HTML page and the CSS on your site under the names that I gave them and I can see them via the web.
I’m a bit suspicious of what you have done, though, because in the HTML code that I last posted, there is NO “listOne item”… I reworded it to say “Home”. So what have you really done? 
The lists in the graybox are auto-centered. Nothing should need to be adjusted.
you’re right it says home now. My fault. Where it says Home, there needs to be a image of the company logo to link to home. If nothing will need to be adjusted how do I add this image to the graybox, I seem to be having trouble with that. I changed the page back to what it was because the new page didn’t look very finished. But I can change it back if you would like to take a look that way.
I’ve been giving it a try and connected the image to “home”. But I have only been able for it to appear as big as the word “home” is so it only shows a small part of the image.
Can you post the HTML and CSS code on your server with different names along side your “working” page?
Please note that the link the new css sheet must reflect the correct css name and URL, otherwise the page will look ugly.
oh my gosh, you were right. The CSS name was put in wrong. Always a simple mistake it seems. The page looks great, only the logo image needs to be put in the “home” area. I’m having trouble with that because it seems to be anchored to the word which keeps the image very small.
Remember also that you cannot use the same ID twice on a page.
Therefore, the id for home in graybox cannot be “home”. It must be id=“home2” or something else unique.
Ok I see, so I can connect the image but it needs a different name than home?
I must be putting it in the wrong place or something. It still seems to be anchored to the word Home. Take a look at the page to see what I mean.
The id for that list item must be unique, because IDs can only be used once on a page.
Looks like you are making headway. Give that id the same dimensions as the image and the image should fit nicely.
I am using the code you sent. I just need an the company logo image where it says home in the graybox. I must be confused on where to put that, it is still anchored to the text and I am using a different Id for it. All the rest of the page is fine and doesn’t need anymore change.
Yep, you got it!
What did I get? The image isn’t appearing for me.
Give me a few minutes. I’ll get back to you.
sure, no problem
The logo image, superfungames.png, really crowds the .graybar. Would you consider using a slightly scaled down version of the sfg.png image (63x63) instead? It would give about 6 more pixels of “breathing room” between the lists.
I changed the way the space is set between the list boxes in .graybox. The new method is simpler and gives more accurate control over the spacing.
The code is set up to use the superfungames.png image as requested. The bar seems a bit crowded to me, though, so I made up a smaller, square image for you to try.
Code for the smaller, square image, sfg63.png, is also included… commented out, of course.
I recommend trying it when you get the smaller image and see what you think. Just swap the closing comment marks around and set the ul spacing as indicated.
Replace ALL of the .graybox code on your stylesheet with this new version.
.graybox { /* THIS CONTAINER div holds the row of lists */
/* outline:1px solid magenta; /* TEST OUTLINE ONLY - DELETE or comment out */
text-align:center; /* centers inline-block objects (the ul's) */
padding-right:12px; /* offsets the lists in .graybox just a tad */
margin-top:620px; /* distance from overhead container */
}
.graybox ul {
/* outline:1px solid yellow; /* TEST OUTLINE ONLY - DELETE or comment out */
display:inline-block; /* sets the ul to an inline-block object so they will align in a row */
vertical-align:top; /* top-aligns the ul boxes */
list-style-type:none; /* removes the bullets */
padding:0; /* removes default padding for bullets */
margin:0; /* removes default margins above and below lists */
}
.graybox ul + ul {
margin-left:18px; /* horizontally separates the list boxes (the ul's) */
}
.graybox li {
text-align:left; /* left-aligns text within each list item */
}
/* anchor treatment (if needed) */
.graybox a {
line-height:1.6; /* height of the list items */
font-size:1.25em;
text-decoration:none;
text-indent:-9999px; /* --- Push the text off screen to hide text --- */
overflow:hidden; /* Stops anchor outline from extending left off-screen */
}
.graybox a:link,
.graybox a:visited {
color:#000;
}
.graybox a:hover {
color:#533996;
}
.graybox a:active {
color:#f00;
}
/* --- REQUIRES: .graybox ul + ul {margin-left:18px;} --- */
.graybox li#home2 a {
display:block;
background:url(../images/superfungames.png) no-repeat;
width:128px;
height:63px;
margin-top:-1px;
}
/* --- REQUIRES: .graybox ul + ul {margin-left:24px;} ---
.graybox li#home2 a {
display:block;
background:url(../images/sfg63.png) no-repeat;
width:63px;
height:63px;
margin-top:-1px;
}
*/
The image is up to the boss man. That image was on the main menu before but he said it was too big, but he does want people to know what SFG stands for so he still wants to use the image. I’ll take a look at it and see what it looks like.