Background image in "ul" centered... but I'd like it at the top

Question

On this page (http://www.bonniesphere.com/blog/elsewhere/) the "li" items have an image instead of a bullet. But the image is centered vertically, and in multi-line entries it doesn't look good. Can anyone tell me if there is something in the CSS that should be changed?

Here's the relative code:

.entry ul {list-style-type:none;} .entry ul li{padding: 0 0 0 15px;background: url(img/ol.gif) no-repeat left center;margin-left:10px;}

Many thanks for your help...

Answer 1

.entry ul {list-style-type:none;} 
.entry ul li{padding: 0 0 0 15px;
background: url(img/ol.gif) no-repeat left top center;
margin-left:10px;}

Just typed that out of the top of my head, but the "top" attribute might do it. You could try and replace the left or center with the top tag, can't check for you as my webdeveloper addon is playing tricks on me. :(

I checked locally, it's the center tag. But there's still an extra bit of whitespace needed.

Answer 2

.entry ul li{padding: 0 0 0 15px;background: url(img/ol.gif) no-repeat left 4pt;margin-left:10px;}

Basically you need to specify the offset from the top. You had center which obviously centered the image vertically.

As a rough guess, I used 4pt but it depends on exactly where you want to position the image. With 4pt it roughly aligns it to the first line, but any change in font-size will screw up the positioning.

Personally, using top for the vertical position is a little too high for my likings.

Answer 3

replace center with top:

background: transparent url(img/ol.gif) no-repeat scroll left top;

Answer 4

This is very odd... I tried all three suggestions above, and none of them changed anything. A little more info, if it helps: it's a Wordpress blog (on my server) and I'm editing style.css through the theme editor. (That shouldn't make any difference...)

Do you suppose there's something elsewhere in the CSS that's making the image stay aligned at the center, over-riding this code??

Answer 5

Thanks for your suggestions... I had Firebug but had never used it - so with a combination of Firebug and the "compare" feature of BBEdit, I was finally able to figure it out! The template author had supplied a fix for the bullet points, but when I uploaded the most recent version of the theme, the problem occurred again. I found it, and voilà...

Thanks to the two programs, I was also able to find a fix for something else that wasn't working.

I'm a happy camper! At least... until the next time I run into something I can't fix...

:-)