Hi Guys,

I have another small problem with CSS List alignment.

If you take a look at http://www.goldnbrowncoventry.co.uk/ you will see that on the menu the "Services" and Information are slightly to the left.

These are at li level but with a list below them as follows:

<li><a href="../index.php">Home</a></li>
    <li>Services
      <ul>
        <li><a href="../cosmetic.php">Cosmetic Injections</a></li>
          <li><a href="../facials.php">Facials</a></li>
        <li><a href="../hairremoval.php">Hair Removal</a></li>
        <li><a href="../skintreatments.php">Skin Treatment</a></li>
        <li><a href="../spraytans.php">Spray Tans</a></li>
        <li><a href="../sunbeds.php">Sunbeds</a></li>
      </ul>

Can anybody help?

Thanks

You have way over-complicated your css..wow. You need to learn to use some css shorthand. You also do not need to specify EVERY level, that's what the cascade is all about. In other words, there is no need to do this:

#container #rightbar ul
#rightbar ul will suffice

You also don't need this: #rightbar ul > li > ul , #rightbar ul ul will work the same way.

You had so many conflicting rules in there for your list, I had to rip it all out and start over. This was the result:

#rightbar ul {
font: 14px bold Arial, Helvetica, sans-serif;
color: #7F0000;
list-style-type: none;
line-height: 1.5em;
/*border: 1px none #E57200;*/
margin: 0px;
padding: 0px;
background: #e57200;

}
#rightbar ul li {
border-bottom: 1px solid #7a0000;
letter-spacing: 0.5px;
font-weight: lighter;
padding: 0 0 0 3px;
margin: 0;
}

#rightbar ul li a {
font-family: Arial, Helvetica, sans-serif;
color: #7F0000;
list-style-type: none;
text-decoration: none;
line-height: 1.5em;
font-weight: normal;
padding-left: 3px;
}
#rightbar ul li a:hover {
color: #FAD71E;
/*list-style-type: none;*/
text-decoration: underline;
line-height: 1.5em;

}
#rightbar ul ul{
background: #ffb15f;
font-size: 12px;
}

#rightbar ul ul li{
border: none;
}
#rightbar ul ul li a{
padding-left: 10px;
}
#rightbar ul ul li a:hover{
color: #7F0000;
text-decoration: underline;
}

When I say shorthand you can turn this:
padding-top: 0px;
padding-right: 5px;
padding-left: 5px;
padding-bottom: 0px;

into this: padding: 0 5px 0 0;

I see what you mean.

I guess I was doing everything the long away all of the time but I have looked through how you did it and it makes sense

Thankyou very much *again* for your help

Don't mean to hijack your thread. I just want to clarify.


Is this a typo?

When I say shorthand you can turn this:
padding-top: 0px;
padding-right: 5px;
padding-left: 5px;
padding-bottom: 0px;

into this: padding: 0 5px 0 0;

There are two 5's in the first one and only one in the second one.
What is the order of that top, right,left, bottom?
All browsers respect it?

oops, yes that's a typo. The statement should read:
padding: 0 5px; or padding: 0 5px 0 5px

Using the first represents top/bottom, left/right
using the 2nd represents top, right, bottom, left

Just remember TRouBLe

And yes, ALL browsers support it.