I'm not sure if I understand what exactly you need. The code looks messy with display: block and float: right on <a>.
However, I see two quick ways you could solve this :- 1. The quick and dirty way is to use inline-block on <a> and set a width on it. Replace your existing 2 images into one, like this: Image: http://img102.imageshack.us/img102/3959/submitnewud6.gif On Hover: http://img518.imageshack.us/my.php?image=submitnewhoverxq5.gif Here's the CSS: body, ul, li { margin: 0; padding: 0;} ul, li { list-style: outside none; list-style-type: none;} ul.submitbuttons li { font-size: 11px; height: 18px;} ul.submitbuttons li a { background: url(images/submit_new.gif) left top no-repeat scroll; color: #fff; font-size: 11px; text-decoration: none; display: inline-block; width: 299px;/* minus padding-left*/ padding: 2px 0 3px 20px; } ul.submitbuttons li a:hover { background: url(images/submit_new_hover.gif) left top no-repeat scroll; } No change in the mark-up is needed. You can remove the extra classes on <li> and <a> if you want. - Mustafa Quilon ______________________________________________________________________ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
