css menu with <ul>?

It must be possible

[joolsm]

I'm sure I'm not trying to do the impossible, but might as well be as am getting nowhere fast.

I cannot get rid of the bullet to the left of each <li> item no matter how I set padding, margins etc. I know it's me going wrong. Have looked on the web and tried working from various examples, but still zilch.

Can anyone enlighten this thickie please? Thanks, Julia

[Birdman]

Hello joolsm,

This info fromw www.w3schools.com/css/pr_list-style-type.asp may help:

The list-style-type property

The list-style-type sets the type of the list-item marker.

Note: Some browsers only support the "disc" value.

Inherited: Yes

Example

ul
{
list-style-type: none;
}

[edited by: Birdman at 9:52 pm (utc) on June 25, 2003]

[MWpro]

ul {
padding: 0px;
}

doesn't work for you?

[dingman]

Whether you need to get rid of margin or padding to "cover up" the bulets seems to vary by browser. I can't immediately think of anything in the standards that says which one should have that effect, but the list-style-type property is how you *should* accomplish this.

[drbrain]

Or the even better use:

ul, ol { margin: 0; padding: 0 }
li { display: block }

This will make your list items behave like ordinary divs.

[mipapage]

WRT the alistapart article, another way of building your menu, if you're goin horizontally, is to float your list items rather than set them as display:inline.

IE5 doesn't like inline padding or margins, so if you were to build an inline menu setting it as display inline and you used horizontal margins to separate the items, this would appear all bunched together in IE5.

Floating the list items allows you to get around that 'bug'

See the menu here:
www.positioniseverything.net/guests/3colcomplex.html
for an example.

-HTH

[quiet_man]

Wow! Thanks mipapage, that's a really great page to learn from. I've been trying to adapt the <ul> idea for a horizontal nav but with no success. Now I know where to start. Thanks again for sharing!

[edit_g]

This is also a very nice working example: http:**//www.waferbaby.com