View Full Version : Problem getting <li> elements to align horizontally

Feb 20th, 2011, 06:48 PM
Please see this website (http://www.gymwallpaddingplus.com).

Trying to align the twitter & facebook links on the left side by side. They are not too wide for the left column which is 190px. Can't seem to get them to sit side by side.

Here is the html:

<ul id="social"><li class="twit"><a class="nob" href="http://www.twitter.com/GymWallPadding" target="_blank">Follow us on Twitter</a></li><li class="face"><a class="nob" href="http://www.facebook.com/pages/Wall-Padding-Matscom/118681761519497" target="_blank">See our page<br />on Facebook</a></li></ul>

Here is the css:

#social { clear: both; margin: 10px 0 0 0; border: 1px solid #f00; padding: 0; width: 190px; height: 24px; }
#social li { position: relative; list-style: none; font-weight: bold; margin: 0; padding: 0; line-height: 12px; height: 24px; font-size: 0.7em; display: block; float: left; }
.twit { width: 75px; background: url(../images/style/twit.gif) top left no-repeat; }
.face { width: 90px; background: url(../images/style/fb.gif) top left no-repeat; }
.twit:hover { background: url(../images/style/twiton.gif) top left no-repeat; }
.face:hover { background: url(../images/style/fbon.gif) top left no-repeat; }
#social .twit a { float: left; padding-left: 28px; color: #333; text-decoration: none; }
#social .face a { float: left; padding-left: 28px; color: #333; text-decoration: none; }
#social li:hover a { color: #000; text-decoration: none; }

Thank you for your help!

Feb 20th, 2011, 07:07 PM
Hello chandldj,
Your social li's are inheriting the clear: both; that you have set on .Left li at line #170 of main.css
Remove this bit highlighted in red -

.Left li {
clear: both;
list-style: none;
margin: 0;
padding: 0;

If you need that clear: both; for other li's, try being more specific when targeting your CSS like this - #ProductMenu li {clear: both;}

Read more about specificity here (http://www.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/).


Feb 20th, 2011, 07:11 PM
Thank you very much... would have taken me forever to catch that. Much appreciated!