Geek asks and answers

Setting height in CSS for an unordered list?

I have a list for my page footer that I want to show horizontally.

But since I turned it into an inline list to go horizontally, background images are cropped vertically. The largest is a maximum of 27px.

So I'm stuck. I know why the following does what it does. But how do I get around this?

Here's the html:

<div id="footer">
    <ul>
        <li id="footer-tmdb"><a href="">Film data courtesy of TMDB</a></li>
        <li id="footer-email"><a href="">Contact Us</a></li>
        <li id="footer-twitter"><a href="">Follow Us</a></li>
    </ul>
</div>

and CSS:

#footer ul {
    height: 27px;
}

#footer ul li {
    display: inline;
    list-style: none;
    margin-right: 20px;
}

#footer-tmdb {
    background: url('../images/logo-tmdb.png') no-repeat 0 0;
    padding-left: 140px;
}

#footer-email {
    background: url('../images/icon-email.png') no-repeat 0 3px;
    padding-left: 40px;
}

#footer-twitter {
    background: url('../images/icon-twitter.png') no-repeat 0 0;
    padding-left: 49px;
}

Here's what it looks like: footer

As you can see, half of the images are disabled.

The simpler the solution, the better.

+3
source share
4 answers
#footer ul li {
    display: block;
    float: left;
    height: 27px;
    list-style: none;
    margin-right: 20px;
}
+5
source

Use inline-block

#footer li {
  height: 27px;
  display: inline-block;
}
+6
source

Try the following:

#footer ul {
    overflow: auto
}

#footer ul li {
    display: block;
    list-style: none;
    margin-right: 20px;
    float: left;
}
+1
source

Try the following:

#footer li,
#footer ul {
    height: 27px;
}
+1
source

More articles:


All Articles