Help with a text alighnment

[WalstonNetDesign]

Ok, I have a menu (that I did not build, that I got from a template) that I cannot seem to figure out how to center the text in, and it's driving me crazy.

I have done the validation, and debugged it as much as I can, but I'm not a css guru, so I was hoping someone here can help me. I feel like I've tried everything.

So you can see the menu at [url]www.eliteoutfittersutah.com/new[/url]. The menu at the top I am desperate to center. I have been able to modify everything else through the css, but just can't seem to get the text alignment centered. I have checked the js files as well, but don't think it's in there. I think it just might be missing a tag? Any help would be GREATLY appreciated.

The lavalamp.css is as follows:

    .lavaLampWithImage {
position: relative;
height: 68px;
width: 1018px;
overflow: hidden;
background-image: url(../images/navbg.png);
background-repeat: no-repeat;
background-position: top;
padding-top: 15px;
padding-left: 0px;
    }
        .lavaLampWithImage li {
          float: left;
          list-style: none;
        }
          .lavaLampWithImage li.back {
            background: url("../images/lava.png") no-repeat right -34px;
            width: 9px; height: 34px;
            z-index: 8;
            position: absolute;
          }
            .lavaLampWithImage li.back .left {
              background: url("../images/lava.png") no-repeat top left;
              height: 34px;
              margin-right: 9px; /* 7px is the width of the rounded shape */
            }
          .lavaLampWithImage li a {
            font: 17px arial;
font-weight: bold;
            text-decoration: none;
            color: #FFFFFF;
            outline: none;
            text-align: center;
            top: 7px;
            text-transform: uppercase;
            letter-spacing: 0;
            z-index: 10;
            display: block;
            float: inherit;
            height: 34px;
            position: relative;
            overflow: hidden;
            margin: 0 12px;  
          }
            .lavaLampWithImage li a:hover, .lavaLampWithImage li a:active, .lavaLampWithImage li a:visited {
              border: none;
            }

[milosevic]

I had a look at this code and it's a real mess.

I can't see any simple way to achieve what you want to (I'm sure it's possible somehow but I don't have time to debug stuff like this for ages), the structure of two ULs superimposed on top of each other is a great example of very poor and confusing code used to achieve a simple visual effect.

You could add a bunch of  s to the start of the "Home" link to move it out from the edge, but then you still have the issue of the highlighting thing that moves around not lining up with it.

My reccomendations would be either:

1. Ditch this the fancy menu idea - is not having an animated effect on a menu going to lose the business sales in the real world?

2. Ditch the current code you are using and look for a better coded and easier to work with replacement, probably something using the jquery library.