Grow your CSS skills. Land your dream job.

Text Decoration Issue

  • # September 15, 2012 at 11:00 am

    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?

    http://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;
    }

    # September 15, 2012 at 11:31 am

    Please put this all in Codepen or jsFiddle

    # September 15, 2012 at 11:32 am

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

    # September 15, 2012 at 11:35 am

    Alright, I changed it to Codepen

    # September 15, 2012 at 11:37 am

    Sweet…and the link is..?

    # September 15, 2012 at 11:42 am

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

    # September 15, 2012 at 12:02 pm

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

    # September 15, 2012 at 12:13 pm

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

    # September 15, 2012 at 12:17 pm

    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.

    # September 15, 2012 at 12:18 pm

    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;
    }
    # September 15, 2012 at 12:24 pm

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

    # September 15, 2012 at 12:24 pm

    Are you using a re-set?

    # September 15, 2012 at 12:30 pm

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

    # September 15, 2012 at 12:31 pm

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

    # September 15, 2012 at 1:31 pm

    Sorry…my mistake.

    It should have been


    li {
    list-style:none;
    }

    You might also want to google “CSS reset”

Viewing 15 posts - 1 through 15 (of 19 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".