[CSS] Bullet points and display:block

Vulcan · 22 Sep 2009 at 11:38

I want the menu to look like this with the bullet points inside the orange boxes, but I want display:block; as well...

1

Now, when display:block; is added, the bullet points move up:

2

Solutions?

Dj_Jestar · 22 Sep 2009 at 11:49

Why do you "need" display: block?

Vulcan · 22 Sep 2009 at 11:50

Dj_Jestar said:
Why do you "need" display: block?

So that boxes function like buttons, rather than only the text being clickable.

Dj_Jestar · 22 Sep 2009 at 11:56

Apply all styling (background, border, block, width, height, etc.) to the a's instead of the li's. Leave the li's transparent/blank-style and use them only as containers.

EDIT: Also, don't think it's possible with the default list-style-position: inside bullets, only outside, or use "background: transparent url(/some/image.png) no-repeat scroll 0 0" on the a's with some padding-left to prevent overlap.

Vulcan · 22 Sep 2009 at 13:02

Well the bullet points are more ideal, but the background image works at least, so I'll go with that.

Thanks.

Dj_Jestar · 22 Sep 2009 at 13:39

Aye, it's a major pain in the backside sometimes

Makhaira · 22 Sep 2009 at 15:19

Correct me if I'm wrong, but isn't it just the OL and UL elements that are blocks, and the LIs are considered inline elements? Been ages since I used lists.

Dj_Jestar · 22 Sep 2009 at 15:24

li's are block (i.e. they stack) by default.