CODEWITHSUNDEEP
htmlcss
user9189600
user9189600

Reputation:

Link underline won't remove on Navigation Bar

I can't seem to figure out why my links continue to have underline, even though I've tried to specify text-decoration none for body and #nav li a.

I can however remove the underline if I specify text-decoration: none under * {} in css.

By the way the links stay underline in the rest of the page as well, unless i do * {} in css. Any suggestions on what I am doing wrong?

Thank you!

/*html, body formatting */

* {
  box-sizing: border-box;
}

html,
body {
  padding: 0;
  margin: 0;
}

body {
  font-family: 'Roboto', Times, serif;
  font-size: 100%;
  color: bisque;
  overflow: hidden;
  text-decoration: none;
}

/* background image */

html {
  background-image: url(../images/portfolio-bg.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  background-attachment: fixed;
}


/* navigation */

#nav {
  max-width: 960px;
  /*border: dotted 1px red;*/
}

#nav ul {
  list-style-type: none;
  text-align: center;
}

#nav li {
  display: inline;
  margin-right: 10px;
}

#nav li a {
  color: #D0D0D0;
  text-decoration: none;
}

#nav a:hover {
  color: white;
}
<head>
  <link href="css/main.css" rel="stylesheet" type="text/css">
  <link href="https://fonts.googleapis.com/css?family=Roboto:300,400" rel="stylesheet">
</head>

<body>
  <div id="wrapper">
    <div id="nav">
      <u>
          <li><a href="#">About</a></li>
          <li><a href="#">Projects</a></li>
          <li><a href="#">Contact</a></li>
      </u>
    </div>
    <div id="header">Leo K</div>
    <div id="main">Main container <a href="#">Test Link</a></div>
    <div id="footer">Footer</div>
  </div>
</body>

Upvotes: 1

Views: 4167

Answers (1)

Vexen Crabtree
Vexen Crabtree

Reputation: 359

Easy, you've missed a much simpler problem!

<u>
    <li>...
    <li>...
<u>

The "<u>"s add the underline until the "</u>". I think you mean "<ul>" for "unordered list", and then "</ul>". Then, your CSS does NOT cover the anchors:

#nav li a

But the sequence should be:

#nav ul li a {text-decoration:none}

So, that's why only the CSS for "remove all underlines from everywhere" works.

I think you want to fix the <u> into "<ul>", and fix the CSS.

Upvotes: 0

Related Questions