More proper methods would require some hooks inside <a> like a <span>
or you need to forego the rounded corners on the right side. This is
considering you cannot edit the anchor element. This is why planning
before you define the mark-up is very important.
Remember, IE6 does not support the use of :hover pseudo class on every
element. In your case <li>. It can be done using Javascript.
2. Here is the one I think you were trying to do. Using the existing
images(reset the paths). Warning: Text-resizing will have some weird
effects.
/*CSS*/
body, ul, li { margin: 0; padding: 0;}
ul, li { list-style: outside none; list-style-type: none;}
ul.submitbuttons li {
background: url(images/submit_step_l_off.gif) left bottom no-repeat
scroll;
display: inline-block;
height: 18px;
padding-left: 20px;
font-size: 11px;
cursor: pointer;
}
ul.submitbuttons li:hover {
background: url(images/submit_step_l_on.gif) left bottom no-repeat
scroll;
}
ul.submitbuttons li a {
background: url(images/btn_right_side_long_off.gif) right bottom
no-repeat scroll;
display: inline-block;
line-height: 18px;
margin-left: -1px;
height: 18px;
padding-right: 10px;
text-decoration: none;
color: #fff;
font-size: 11px;
text-decoration: none;
}
ul.submitbuttons li a:hover {
background: url(images/btn_right_side_long_on.gif) right bottom
no-repeat scroll;
}
Again, 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 [[email protected]]
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/
