unordered list - strange behavior

[pesho318i]

hi,

I'm trying to construct an unordered list with custom bullets. However, the <li> elements appear one after the other (instead of one on top of the other like it should be).

Maybe I have messed up the alignement, I don't know.


CSS:

Code: Select all

.myClass ul.categorylist{
    width: 208px;
    float: left;
    padding: 0;
    margin: 0;
}
.myClass ul.categorylist li{
    background-image: url(../images/category-arrow.gif);
    background-repeat: no-repeat;
    background-position: 0 0;
    display: inline;
    padding-left: 1.5em;
    margin-left: 1.5em;
}

HTML:

HTML: Select all

<div class="myClass">
   <ul class="categorylist">
       <li>category1</li>
       <li>Brand</li>
   </ul>
</div>

[Marc]

Can we see the image called 'category-arrow.gif'?

[MikeHopley]

Code: Select all

display: inline;

What do you expect to happen if you use this code?

This formats the <li>s as inline elements: they behave like text in a paragraph. Consequently, they will line up alongside each other, rather than start a new line.

Take out that line of code, and it should work.

[Marc]

Haha.. That's what i get for not looking past the image line of code!!! DOH!

[Stuart]

Marc, you mean: <HomerSimpson>D'oh!</HomerSimpson>

[pesho318i]

hi,

the image is just a stupid small image, but it's not the problem.

I also tried removing the "inlined" attribute of <li> but it didn't help. Probably the css for <li> inherits some of the attributes from another element... What should be the "display" attribute?

[MikeHopley]

Should be: { display: block }

[pesho318i]

thanks

so I guess obviously it inherited the display from a parent node...

Best,
Pesho

[pesho318i]

uups, I have one more question:

I'd like to add a number on the right of every <li>

Something like:

Code: Select all

 My UL
   * li_1                3
   * blqblq_2           24
   * blqblqblq         318

to my css I add:

Code: Select all

 .myClass ul.categorylist li span.cat-number{
    float: right;
}

my HTML becomes:

Code: Select all

<div class="myClass">
    <ul class="categorylist">
              <li>li_1</li><span class="cat-number">3</span>
              <li>blqblq_2</li><span class="cat-number">24</span>
    </ul>
</div>

[MikeHopley]

Originally Posted by pesho318i

so I guess obviously it inherited the display from a parent node...

Very likely.