CODEWITHSUNDEEP
htmlcss
ss7
ss7

Reputation: 3012

Dots in my Anchors in Nav Bar

Doing some basic html/css. I was making a rudimentary navbar with floated links. After getting it working I was stuck with this problem, and so far have not come to a solution.

My links have these dots in them. As the picture shows.

1

My code is simple:

HTML

            <div id="nav-wrapper">
                <div id="navbar">
                    <ul id="nav">
                        <li><a href="">Home</a></li>
                        <li><a href="">About</a></li>
                        <li><a href="">Blog</a></li>
                        <li><a href="">Contact Us</a></li>
                    </ul>
                </div>
            </div>

and the CSS

#nav-wrapper {
background-color: black;
height: 40px;
width: 100%;
border-top: 2px solid gray;
border-radius: 0 0 5px 5px;
}

#navbar {
}

ul#nav li { 
float: left;
font-family: sans-serif;
font-size: 18px;
text-decoration: none;
}

ul#nav * a {
width: 25px;
margin: 0 10px 10px 0;
}

My question is what is causing these dots? And why don't they appear if I add more words/links to the list or I erase all but one item? It's odd. I must be missing something extremely embarrassing because this just seems odd.

Upvotes: 0

Views: 1535

Answers (3)

p.campbell
p.campbell

Reputation: 100607

Modify your declaration for ul#nav li to include this property

list-style:none;

http://jsfiddle.net/bcDDk/

Upvotes: 1

Carsten L&#248;vbo Andersen
Carsten L&#248;vbo Andersen

Reputation: 27051

You want to use the code - list-style: none;

so your code will look like 

ul#nav li { 
float: left;
font-family: sans-serif;
font-size: 18px;
text-decoration: none;
list-style: none;
}

Upvotes: 2

acfrancis
acfrancis

Reputation: 3681

Add this style:

list-style-type: none;

To this selector:

ul#nav li

Upvotes: 1

Related Questions