bullets and pseudo elements or images and padding??

[kmurphy]

Hi, I have been able to create image roll overs with inline and block list items, using the image background route, but I was wondering why I have not been succesful using the following route:

.navListVertical li {
list-style-type:none;
}
.navListVertical li a {
text-decoration: none;
}
.navListVertical li a:link {
list-style-image:url(../images/design/subNavArrow1Green.png);
}
.navListVertical li a:visited {
list-style-image:url(../images/design/subNavArrow1Green.png);
}
.navListVertical li a:hover {
list-style-image:url(../images/design/subNavArrowGreen.png);
}

The reason I started attempting the above method was due to the wrapping of the unordered list items and the resulting unpleasant appearance of an indent as the wrapped line displays without the padding-left space created for the bullet imageas. It makes it appear as though the list items are styled to be 'inside'.

So I guess I have to find out why the above styles don't work for assigning bullet images to list items or figure out how to indent the wrapping line.
Any suggestions??

Thanks

[Paul O'B]

Hi,

The above doesn't work because you are applying list-style-image to anchors which are not list elements.

The list-style-image only applies to lists (li) (funnilly enough )

Inline elements can be awkward with padding and its usual better to float them rather than display inline etc.

If you have an example of what you are trying to avoid then it might be easier to work out what you are trying to do and offer some code (if possible of course .

Paul

[kmurphy]

Thanks, I really have to try to wrap my head around this css stuff a bit better... I thought a contextual tag would work but that is because I don't quite understand this stuff yet!! Oh well... an example of what is happening can be seen on any of the left or right columns on this site I am building but there are lots of links on the Wordpress blog page... http://66.183.118.242:9090/GCCBFM/news/blog/
If you resize the window you will see that the list elements appear to be indented on the first line due to the image BG bullet...
Thanks yet again!

[Paul O'B]

Hi,

The link above is not working so I can't see exactly what you mean. I'll wait until you fix it before replying again

Paul