Text Decoration Issue

[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”

[Author]

Posts