Forums

alex_wilson

I'm new to CSS and when I entered the command to get rid of text decorations, in my articles, nothing happened. I tried placing in different bits of the code, but still nothing. Any suggestions on what is causing it not to work?

https://raw.github.com/gist/3728435/c4f11817a3260aa7619dbeb3a58cd8ab4c3f21eb/style.css

body {background-color: #FFFFFF;
margin:0px 0px; padding:0px;
text-align:center;
font-family: Georgia;
width: 100%;

}
h1 {margin:0cm;
border:0cm;
padding:0cm;
margin:0cm;
margin-bottom: -0.23cm;
}

nav{
background-color: #444;
width:100%;
margin:0px auto;
margin-top: -24px;
}
nav ul{
list-style: none;
overflow: hidden;
}
nav li a{
background: #444;
color:#fff;
display: block;
float: left;
font: 400 16px/1.4 Georgia;
padding:10px;
text-align: center;
text-decoration: none;
text-transform: uppercase;
width: 12.5%;

-webkit-transition: background 0.5s ease;
-moz-transition: background 0.5s ease;
-o-transition: background 0.5s ease;
-ms-transtion: background 0.5s ease;
transition: background 0.5s ease;
}
nav li a:hover {
background:#222;
}
nav li:last child a {
border: none;
}
nav samll{
color: #aaa;
font: 100 11px/1 Georgia;
text-transform:none;
}
div.floating-menu {
position:fixed;
margin-top: 15px;
border-top: 15px solid #000000;
border-bottom: 15px solid #000000;
background:#fff;
width:150px;z-index:100;
}
div.floating-menu a, div.floating-menu h4 {
display:block;
font:450 12px/1.4 Georgia;
padding-bottom:auto;
padding-top:auto;
padding:3px;
margin: -2%;
text-decoration: none;
text-align: center;
color:#000000;
-webkit-transition: background 0.5s ease;
-moz-transition: background 0.5s ease;
-o-transition: background 0.5s ease;
-ms-transtion: background 0.5s ease;
transition: background 0.5s ease;
}
div.floating-menu h4:hover{
background-color:#dcdcdc;
}
article{
padding-right: 50px;
padding-left: 50px;
text-align: center;
line-height:200%;
text-decoration: none;
}
#container {
    width: 960px;
    margin: 0 auto;
    margin-bottom: 30px;
}
#primary {
    float: left;
    width: 240px;
}
#content {
    float: left;
    width: 480px;
}
#secondary {
    float: left;
    width: 240px;
}
#bottom{
  float: right;
  width: 960px;
  margin-bottom: 30px;
}
#footer {
    clear: both;
    background: #dbdbdb;
    width: 100%;
    height: 150px;
    color: #ff6347;
    padding-top: 10px;
#overlay {
  background: rgba(0, 0, 0, .9);
  color: #fff;
  margin-top: 150px;
  padding: 20px;
  position: absolute;
  text-align: center;
  width: 100%;
}
#overlay h2 {
  font: 200 4em/1.5em "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
}
 
#overlay p {
  font: 100 1.2em/1.5em "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
}
}
#theMap iframe {
  height: 100%;
  width: 100%;
}
h5{ color: #ff8c00;
padding: 0cm;
margin-top:0cm;
margin-bottom:7px;
}

Paulie_D

Please put this all in Codepen or jsFiddle

alex_wilson

Sorry, I'm working on doing that, but I've never used either of them.

alex_wilson

Alright, I changed it to Codepen

Paulie_D

Sweet...and the link is..?

alex_wilson

http://codepen.io/anon/full/giLml

Paulie_D

You seem to be referring to margins in cm which is invalid in HTML & CSS (AFAIK).

alex_wilson

Alright, I changed all the cm to either %, or px

TheDoc

Something about the HTML5shiv that you are including is causing everything to fail. When I take it out, everything works normally.

And yes, don't use cm for measurements.

Paulie_D

OK. It's difficult to see what is supposed to be happening as the Codepen is (apparently) not getting eveything.

If you are referring to losing the bullets just add this at the top of your CSS


li {
text-decoration:none;
}

alex_wilson

TheDoc, I took out all the HTML5shivs and the bullets were still present.

Paulie_D

Are you using a re-set?

alex_wilson

Paulie_D, I used that code and the bullets were still present. I updated my code on Codepen: http://codepen.io/alexlwilson/full/hboig

alex_wilson

Paulie_D, what do you mean by a re-set?

Paulie_D

Sorry...my mistake.

It should have been


li {
list-style:none;
}

You might also want to google "CSS reset"

alex_wilson

Thank you! Someone else said I should use:

article a:link, article a:active, article a:visited, article a:hover { text-decoration: none; }

Thanks again! And I already looked up CSS reset, just haven't read it thoroughly.

Paulie_D

'text-decoration' relates (usually) to links.

The code you posted will stop links in articles being underlined in any circumstances.

It's a choice...some people prefer to have links underlined when they are hovered but some prefer a color change.

As I said, it's a choice.

sachinn

hi alex,

Used this Css Selector: It will none all the text decoration property. * { text-decoration: none !important; }

Paulie_D

@sachinn I wouldn't do that because there may be occasions when you might want to use text-decoration and you've just made that practically impossible.

treehouse : what would you like to learn today?

Forums

[Solved] Text Decoration Issue