unordered list - strange behavior

pesho318i · #1 Dec 6th, 2007, 11:38

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 · #2 Dec 6th, 2007, 11:43

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

MikeHopley · #3 Dec 6th, 2007, 11:49

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 · #4 Dec 6th, 2007, 11:50

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

Stuart · #5 Dec 6th, 2007, 11:56

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

pesho318i · #6 Dec 6th, 2007, 13:03

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 · #7 Dec 6th, 2007, 13:50

Should be: { display: block }

pesho318i · #8 Dec 6th, 2007, 14:02

thanks

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

Best,
Pesho

pesho318i · #9 Dec 6th, 2007, 14:19

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 · #10 Dec 6th, 2007, 14:19

Quote:

Originally Posted by pesho318i

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

Very likely.

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
unordered list problem in FF	alexgeek	Web Page Design	4	Sep 10th, 2007 15:26
Image bullets on unordered list	Kobrakai	Web Page Design	4	Aug 15th, 2007 18:27
Strange form submit behavior in IE	Donny Bahama	PHP Forum	3	Apr 27th, 2007 19:36
Unordered list under background image	AdRock	Web Page Design	4	Aug 7th, 2006 12:43
CSS Unordered List Problem	relph2	Web Page Design	3	Jan 7th, 2006 18:14

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
unordered list - strange behavior