Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Feb 2011
    Posts
    9
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Problem getting <li> elements to align horizontally

    Please see this website.

    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:

    Code:
    <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:

    Code:
    #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!

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,667
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    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 -
    Code:
    .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.



    .
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    chandldj (02-20-2011)

  • #3
    New to the CF scene
    Join Date
    Feb 2011
    Posts
    9
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thank you very much... would have taken me forever to catch that. Much appreciated!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •