Angela French wrote:
> I am using a graphic as a background image on all lists in my site.
> The problem is that on nested lists, the graphic appears twice on the
> <li> that is the first item for the nested list.
This would be easier if you specified the URL, so that we can see the markup
and all of the CSS code.
> My style is written like this:
>
> ul li {
> background: url(../images/rightarrow.gif) no-repeat;
> }
Presumably that's not all... probably you additionally have at least
something like
ul li { list-style: none }
so that you don't get both the default bullets and your customized list
markers.
> My html for the nested list is correctly formatted.
But it matters what the markup really is.
If you have
<ul>
<li>...</li>
<li>...</li>
<li>some text
<ul><li>...</li></ul></li>
</ul>
then the problem does not occur, since the inner list starts on a new line.
But if you omit the "some text" part, which acts like a heading or a legend
for the inner list that follows, so that you have
<ul>
<li>...</li>
<li>...</li>
<li>
<ul><li>...</li></ul></li>
</ul>
then there's a problem, since you get a background image for the <li>
element that contains the list as well as for the <li> elements inside it.
And the outer <li> element here starts on the same line as the first inner
li element, and they both have the background image.
The natural approach would be to suppress the background image if a <li>
element contains a <ul> element, but we don't have a suitable selector at
our disposal. We cannot write a selector that selects elements according to
their content (contained elements).
An obvious workaround is to use classes, but things get somewhat awkward
then. I hope someone has a better idea, but I'd write
<li class="inner_list">
<ul><li>...</li></ul></li>
with
ul li.inner_list { background: none; }
--
Yucca, http://www.cs.tut.fi/~jkorpela/
______________________________________________________________________
css-discuss [[email protected]]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
