<ol> inside <ul> inherits custom bullet image!?!?

Forum Moderators: not2easy

Message Too Old, No Replies

<ol> inside <ul> inherits custom bullet image!?!?

Am I going mad or is this a browser bug?

Purple Martin

6:39 am on Jul 23, 2003 (gmt 0)

I've just found this problem in IE6, I haven't tried it with other browsers. I'm 99% certain I've got the nesting correct.

If I don't use the custom bullet style, the lists appear as you'd expect: the outside unordered list has the browser's default bullet and the inside ordered list is numbered.

As soon as I add the ul style, BOTH lists get the custom bullet image. Any ideas why? Thanks in advance!


<style type="text/css">
<!--
ul { list-style: url(bullet.gif)}
-->
</style><p>This is a paragraph.</p>
<ul>
 <li>An unordered item.</li>
 <li>Another unordered item.
 <ol>
 <li>The first ordered item.</li>
 <li>The second ordered item.</li>
 </ol>
 </li>
 <li>One last unordered item here.</li>
</ul>

Nick_W

6:50 am on Jul 23, 2003 (gmt 0)

>> I haven't tried it with other browsers

Why not? ;)

You should try being a little more specific, I believe the behaviour is correct as you are applying the style to the <ul> not the <li> and the <ol><li>'s tecnically are part of your <ul>... er... with me? hehe

Try this:

ul li {blah...
ol li {list-style-image: none;

You may not need the second bit, try it....

Nick

Purple Martin

1:51 am on Jul 24, 2003 (gmt 0)

>> Why not? ;)

Because the site I'm working on is for an IE6-only corporate environment :)

Yes I do follow what you're saying, I guess I'm just surprised that the style inherits in that way. I was expecting <li>s in <ol>s to be treated as different beasties from <li>s in <ul>s, but it turns out that they're treated as the same.

I do need both bits to make it work:

ul li {blah... }
ol li {list-style-image: none;}

Thanks for your help!