...

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



chandldj
02-20-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!

Excavator
02-20-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/).



.

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



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum