CODEWITHSUNDEEP
css
user1269625
user1269625

Reputation: 3209

CSS line-height not working

I have this div that I am trying to apply line-height like so...

.social {
    background-color: #FFFFFF;
    float: left;
    font-size: 18px;
    height: 93px;
    line-height: 60px;
    padding-left: 20px;
    width: 190px;
}

but the .social class won't down, whatever is inside the div stays at the top...here is the html..

<div class="social">
     <ul>
          <li class="facebook">
               <a href="http://www.facebook.com/SurfTheCurve" target="_blank"></a>
          </li>
          <li class="twitter">
               <a href="https://twitter.com/SurfCurveTutor" target="_blank"></a>
          </li>
          <li class="email">
               <a href="mailto:[email protected]?subject=Website Enquiry" target="_blank"></a>
          </li>
     </ul>
</div>

Here is some other CSS

.social ul {
    list-style-type: none;
    margin: 0;
    padding: 0 0 0 15px;
}

.social li {
    float: left;
}

.social ul .facebook a {
    background-image: url("images/facebook.png");
    background-position: right center;
    background-repeat: no-repeat;
    color: #FFFFFF;
    display: block;
    height: 35px;
    text-decoration: none;
    width: 35px;
}

.social ul .twitter a {
    background-image: url("images/twitter.png");
    background-position: right center;
    background-repeat: no-repeat;
    color: #FFFFFF;
    display: block;
    height: 35px;
    padding: 0 10px;
    text-decoration: none;
    width: 35px;
}

.social ul .email a {
    background-image: url("images/email.png");
    background-position: right center;
    background-repeat: no-repeat;
    color: #FFFFFF;
    display: block;
    height: 35px;
    padding: 0 10px;
    text-decoration: none;
    width: 35px;
}

Hope this helps

Upvotes: 1

Views: 18324

Answers (1)

Dai
Dai

Reputation: 155708

line-height requires text (otherwise there's no line!) but the HTML you've provided doesn't have any text, it's all just empty <a> elements.

I made a jsFiddle here: http://jsfiddle.net/7vcmC/ (I had to change the color settings) but I guess that's the effect you're after?

Upvotes: 6

Related Questions