I have just inserted new buttons on to my website, but they are too long for the template as they overlap other things. I do not want to make the buttons smaller, instead i want to move them left so they will not overlap any more. I don't know how to move the buttons though...please help.

The Site

*EDIT* - Just noticed it appears differently in Firefox than IE! In Firefox it overlaps, but in IE it moves the text box to the bottom of the page. I still want to know how to move the buttons left...

The issue with the spacing is that IE and Firefox use different things on the list <ul> to add that indentation. You have the margin set to 0, but to get the list looking the same in both you'll also need to make the padding 0 for the <ul>. That will clear the defaults for each browser and get them in synch.

Whenever you work with lists it's usually a good idea to set both margin and padding to 0 right away and then add back to either one if you need. Setting both to 0 gets IE and Firefox to agree.

Okay, i'm still slightly confused...i know - i'm such a n00b. Anyway...here is my menu CSS coding...what do i need to do?


#main
{
padding-top: 20px;
position: relative;
width: 680px;
margin: 0px auto;
padding-bottom: 10px;
}

I actually took a closer look and the problem is with this code:

#menu a
{
display: block;
position: relative;
width: 168px;
height: 27px;
margin-bottom: 1px;
text-decoration: none;
background: inherit;
background-image: url('images/bbg0.gif');
padding-left: 17px;
padding-top: 11px;
color: #FFF;
text-transform: lowercase;
font-size: 13px;
}

The reason the images are moved to the right is because of the code above that says padding-left:17px. If you remove that line of code or set padding-left:0 instead the images will move to the left like you want.

Try that and see if it works like you want and let me know.

That worked a treat, thanks a lot mate!! I'll add to your talkupation for that one !

Glad to help and thanks for any TP you send my way.