Well, I can offer how I’d approach it…
First I’d place the image and list in div with a unique class. Note that the image would not be in the list markup. It would be on it’s own immediately before the <ul>. Then I’d float the image left using the div class to ensure that I was only targeting this image and not all images in the content area.
At this point, I’d review the page and see how the list was displaying. If the bullets were hidden by the image, I’d consider applying a left margin to the ul (again using the div class for specificity) and/or using list-style-position:inside; plus a left margin on the <li>.
Does that help at all?
Thank you that does help.
I can make that work for me because I know how to add div classes. I was hoping for a more generic solution because I am setting up this blog for a client that doesn’t understand html. It has come up with other clients as well That may not be possible but it never hurts to ask!
Any other ideas are appreciated 🙂
In that situation, I’ve installed the Quicktag Extender plugin and created a new button to surround the whole “image/list” markup in a single div with the right class already attached. Then I’ve taught the client how to use the HTML tab.
Another option if they’re using pages would be to create a custom page template (call it something like “Image plus List”) and replace the “image/list” enclosing div with a unique class on the post div. The drawback then is that all inserted images will be floated when that template is applied.
try to turn this:
.art-Post ul li, .art-Post ol ul li
{
background-image: url('images/PostBullets.png');
background-repeat:no-repeat;
padding-left:13px;
}
into this:
.art-Post ul li, .art-Post ol ul li
{
list-style-image: url('images/PostBullets.png');
background-repeat:no-repeat;list-style-position:inside;
padding-left:0px;
}
seems to look ok, at least in firefox with developer addon.
