Little pics to bullet headings

[Glom]

On my blog, which I didn't design, it does something clever will CSS to put a little pic to mark a post heading. The CSS works like this.

.post h3 {  margin:.25em 0;  line-height: 1.4em;  font: normal bold 95% Verdana,Sans-serif;  font-size: 130%;  font-weight: bold;  color:#99cc77;  background:url("http://www.blogblog.com/dots_dark/bg_post_title.gif") no-repeat 0 .25em;  padding:0 0 1px 45px;}

Basically, it uses a small image as a non-repeating background and then puts in a margin to push the text out sufficiently far.I tried the same thing on my main site, which I did design. The CSS worked like this:

h3   {   color:#444477;   background:inherit url('img/littleneutron.png') no-repeat;   font:800 85% sans-serif;   margin-left:25px;   }

The margin is put in on schedule. But the image is missing. I also tried with a site related to my company's website and had the same problem.

[businessman332211@hotmail.com]

Try it without the inherit part, that could be what's causing that.

[Glom]

Try it without the inherit part, that could be what's causing that.

Well so it is. I also discovered I need to use padding rather than margin to create the indent.I don't suppose you kow how to create non-square images, do you?

[businessman332211@hotmail.com]

yes, why.It depends if you want rounded corners, then simply use curvy corners.If you want rounded images, they are easy, you can use flash, or php to dynamically create the images, make them round instead.In photoshop you can also make them round, they don't have to be squared, that's prefences. There are round images all over the place, and other shapes as well.

[Glom]

I was afraid you'd say that.Moving on, there is another problem I've noticed. Take here for example. There is a picture inserted on left which pushes the argument to the right. The neutron pic however doesn't go with it. It remains on the left looking stupid.