need CSS help for unordered list

Question

I am trying to create a basic navigation bar using an unordered list, but for some reason I can't get the bullets to go away.

I have searched for a solution on Google and to me it seems like it SHOULD be working, but I think I might be messing up something that isn't related to the style of the ul, which is in turn preventing the ul style from being applied.

Here is the relevant html:

<div id="nav">
    <ul>
        <li><a href="index.html">Home</a></li>
        <li><a href="about.html">About Us</a></li>
        <li><a href="example.html">Examples</a></li>
        <li><a href="contact.html">Contact Us</a></li>
    </ul>
</div>

and here is the CSS:

#nav ul
{
    list-style-type: none;
    position: absolute;
    top: 10px;
    right: 0;
    margin: 0;
    padding: 0;
}
#nav ul li
{
    float: left;
}
#nav ul li a
{
    display: inline;
    float: left;
    padding: 8px 5px 3px 5px;
    margin-right: 5px;
    background-color: #034a7f;
    color: #fff;
    font-weight: bold;
    text-decoration: none;
}
#nav ul li a:hover
{
    padding-top: 12px;
    background-color: #075a97;
}

I don't see any bullet points: jsfiddle.net/BoltClock/5Tnxs What browsers are you testing on? — BoltClock
– BoltClock, Commented Mar 29, 2011 at 19:17
Well Groovetrains answer seemed to solve the problem, but I am still confused why it didn't work originally. I just tried it in Chrome 10, and still have the same problem. Also I am on a Mac, if that makes any difference. — RyanE
– RyanE, Commented Mar 29, 2011 at 19:34
Ok I have firebug now, wish I would have known about this before. This is an awesome add-on. — RyanE
– RyanE, Commented Mar 29, 2011 at 19:48

Groovetrain · Accepted Answer · 2011-03-29 19:19:19Z

7

Just to be certain, I usually apply it to the lis too:

#nav ul li
{
    list-style-type: none;
    float: left;
}

Something else to check is to use a tool like firebug for firefox and right-click on a list-item and do a 'inspect element'. From there you can see the styles that are actually applied to it and where they stem from, which ones are overriding which, etc.

More than likely, what's happening (with the other answer and comment) is that you've got some other style that's making the bullets show up-- which is where firebug will really help you out.

answered Mar 29, 2011 at 19:19

Groovetrain

3,32521 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

RyanE Over a year ago

Well adding the style to the li's seemed to fix it, but I am still wondering why it didn't work before.

Groovetrain Over a year ago

@RyanE Well I'm happy to help and hope you'll accept my answer. This is really where firebug will help you track down styles that were being applied and why.

Wavyx · Accepted Answer · 2011-03-29 19:22:12Z

0

I don't see any bullets either. maybe try a full refresh: CTRL+F5 or CTRL+R And you may try this css

#nav ul li{ list-style: none; }

answered Mar 29, 2011 at 19:22

Wavyx

1,7552 gold badges14 silver badges23 bronze badges

Comments

Max · Accepted Answer · 2011-03-29 19:26:50Z

0

It works. You may have another rule that cancels out the #nav ul. You can probably test it by adding

body #nav ul

answered Mar 29, 2011 at 19:26

Max

1

Comments

Scott Adams · Accepted Answer · 2011-03-29 19:27:42Z

0

This is what I use for my horizontal menu bar using CSS. I've never had any problems with it.

    #nav {
    padding-bottom: XXpx;
    margin:0px auto;
    }
    #nav ul { list-style:none;
    padding: XXpx;
    margin: XXpx;
    }
    #nav ul li {
    float:left;
    }
    #nav span {
    position:absolute;
    left:-9999px;
    }

answered Mar 29, 2011 at 19:27

Scott Adams

1

Collectives™ on Stack Overflow

need CSS help for unordered list

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related