Clever Geek Handbook

The background image in the "ul" is centered ... but I would like it to be at the top

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 it doesn't look very good in multi-line entries. Can anyone tell me if there is something in the CSS that needs to 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...

0


source to share


5 answers


replace center with top :



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


source 


.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 this from the top of my head, but the "top" attribute can do it. You can try replacing the left or center top tag, cant check how my webdeveloper addon plays with my tricks. :(



I checked locally, this is the center tag. But you also need some free space.

0


source 


.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 an offset from the top. You had a center that seemed to center the image vertically.

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

Personally, using the top for the vertical position is too much for my preference.

0


source


This is very strange ... I tried all three suggestions above and none of them changed anything. A bit more info if that helps: This is a Wordpress blog (on my server) and I am editing style.css through the theme editor. (It shouldn't make any difference ...)

Are you suggesting that there is something in the CSS that makes the image in the center aligning this code?

0


source


Thanks for your suggestions ... I had Firebug but never used it - so with a combination of Firebug and BBEdit's "compare" function, I was finally able to figure it out! The template author provided a fix for the bullet points, but when I downloaded the most recent version of the theme, the problem reappeared. I found it, and voila ...

Thanks to two programs, I was also able to find a fix for something else that didn't work.

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

: -)

0


source






More articles:


All Articles