LukeV Posted August 4, 2009 Share Posted August 4, 2009 Hello,I'm trying to get this effect with an unordered list:But instead I am getting this:Basically the problem is the border at the bottom does not go under the bullet.Here's the code I'm using. ul.frontpage_list { font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: #7f7e7e; margin-top:20px; margin-bottom: 30px; list-style-image: url('images/spade.gif'); padding-left: 18px; }ul.frontpage_list li{ line-height: 30px; border-bottom: 1px dotted #555; } Anyone know which would be the best way to achieve such an effect? Link to comment Share on other sites More sharing options...
jeffman Posted August 4, 2009 Share Posted August 4, 2009 You'll probably need to make other changes to accommodate this, but add the following to your li definition:list-style-position: inside; Link to comment Share on other sites More sharing options...
LukeV Posted August 4, 2009 Author Share Posted August 4, 2009 If I add that definition then there is no spacing between the bullet and the text in IE. It was the first thing I tried.So I'm guessing I'll have to put in the image of the spade within and <img> next to the text then? It should work but it just doesn't look very neat. Link to comment Share on other sites More sharing options...
chibineku Posted August 4, 2009 Share Posted August 4, 2009 You can choose to have no list style, so there is no symbol, and just prepend each list item with the image. You can decrease the left offset (or make it negative) to eradicate the space where the list symbol usually would be Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.