Problem tailoring CSS image rollover menu in UL 1

[TobyA]

Dear Web Gurus,
I am using a CSS image rollover in conjuction with a UL here:-

http://www.newbondstreetpawnbrokers.com/new/

Originally I got the CSS from here:-

http://www.simplebits.com/notebook/2003/09/30/accessible_imagetab_rollovers.html

However I've had to hack it to work in a vertical menu. As you can see it's not quite right - For some reason there is a margin to the left of the button which I don't want that in turn is cutting off the button so you cannot see the right hand edge of the image.

Any suggestions would be greatly appreciated.

Cheers,
Toby

PS - I posted this message in a reply to a previous thred but didn't receive any response so I am posting again.

 

[Vragabond]

Your problem has to do with the default padding and/or margin applied to the ul element. If you look at the ul element by default, the text is moved inside a little bit. This is achieved either by padding or margin or combination of both in various browsers. In your code, your ul is kept at the default styling of the browser and so that gap exists and plays a part in your button not showing up correctly. In your css, make sure you define 0 padding and margin to the ul element. Best would be like so:

#nav ul {
  padding: 0;
  margin: 0;
}

 

[TobyA]

Thank you Vragabond - As usual you have saved the day.

It's working now:-

http://www.newbondstreetpawnbrokers.com/new/index.htm

...