Hi,

Can anyone with any knowledge of css give me any assistance on my nav. I am completely befuddled.

I have taken the plunge and tried to make my own css nav with gif images. The problem is browser compatibility - of course! Basically everything shows wonderfully in some browsers, but in others, like seamonkey the last link goes on to a new line underneath.

I have tried changing the font size and this hasn't worked. it also shrinks the text and it budges up to the left, giving a large gap at the end which isn't ideal - i would like the text to be equal in one long line starting at the beginning and finishing at the end....if possible!

I have been trying to read up on how to overcome various issues in css for different browsers, but i have come to a sticking point and don't know what to do next. Can anyone give me any assistance?

My website is here - http://www.pet-portraitartist.com

I have added my css code below. If anyone can do any form of tweaks or tell me how to tweak it, i will do and then will check it in broswershots.

Thank you in advance for any help you can give

#nav-menu ul
{
    margin:0;
    padding:0;
    list-style-type:none;
    width:auto;
    position:relative;
    display:block;
    text-transform:uppercase;
    font-size:12px;
    font-weight:bold;
    font-family:Helvetica,Arial,Verdana,sans-serif;
    text-align: center;
    }

#nav-menu li
{
    display:inline;
    float:left;
    background:url(http://www.pet-portraitartist.com/menu/line.gif) top right no-repeat;
    padding-right: 10px;
    }

#nav-menu li a
{
    height: 30px;
    line-height: 34px;
    float: left;
    width: 100%;
    padding:3px 4px 0px 4px;
    display: block;
    color:#333;
    text-transform:uppercase;
    text-decoration:none;
}
#nav-menu li a:hover
{
    height: 55px;
    line-height: 40px;
    float: left;
    width: 100%;
    display: block;
    color:#900;
    text-transform:uppercase;
    text-decoration:none;
    background-color: #fff;
    background-image: url(background.gif);
    background-repeat: repeat-x;
    background-position: left bottom;
    padding-top: 0px;
    padding-right: 4px;
    padding-bottom: 0px;
    padding-left: 4px;
}
#nav-menu li a.current
{
    height: 55px;
    line-height: 40px;
    float: left;
    width: 100%;
    display: block;
    color:#900;
    text-transform:uppercase;
    text-decoration:none;
    background-color: #fff;
    background-image: url(current.gif);
    background-repeat: repeat-x;
    background-position: left bottom;
    padding-top: 0px;
    padding-right: 4px;
    padding-bottom: 0px;
    padding-left: 4px;
    }
    
/* Hide from IE5-Mac \*/
#nav-menu li a
{
float: none
}
/* End hide */

#nav-menu
{
    height: 55px;
    background-image: url(bgnav.gif);
    background-repeat: repeat-x;
    background-position: top;
}

I have been working on it today and I think I may have fixed the issue but id be really grateful if anyone here could take a look to see if I have anything incompatible that they can see?

I have validated the css in w3c and its all come out fine. The only thing I can see is in IE7 the text goes to the left a little and the current button doesn't repeat properly, but everything is on the same line thank goodness.

thank you for your help in advance

On the "current" button, if you're referring to the orange not taking up the entire space of the li, you need to do 2 things: 1) set the <a> to display:block. That allows the entire width of the available space to be clickable, and 2) remove the 10px right padding in the <li> and put it on the <a> inside the list instead.