SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Enthusiast
    Join Date
    Aug 2008
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Icon Layout in Chrome

    I have Facebook and Twitter icons on this page that aren't lined up in Chrome:

    http://www.spsact.org

    Sometimea they are lined up but if you refresh the page they go out of alignment again.

    This looks fine in Safari and Firefox.

    Any help would be appreciated. Thanks.

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,598
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    Just a guess here, but you have more styles that you need on the image inside the <a>. Try removing the stuff in red:

    Code:
    style="margin: 0pt 0pt 6px; height: 32px; width: 32px; padding: 0pt; border: 0px solid rgb(255, 255, 255); overflow: hidden; display: inline-block; height: 32px;"

  3. #3
    SitePoint Enthusiast
    Join Date
    Aug 2008
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the suggestion. I took everything out but it didn't fix the issue. I added back in the border style. Otherwise there is a white border around the images.

    Quote Originally Posted by ralph.m View Post
    Just a guess here, but you have more styles that you need on the image inside the <a>. Try removing the stuff in red:

    Code:
    style="margin: 0pt 0pt 6px; height: 32px; width: 32px; padding: 0pt; border: 0px solid rgb(255, 255, 255); overflow: hidden; display: inline-block; height: 32px;"

  4. #4
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Try floating them instead. I did about 20 refreshes and it didn't break once after trying it.

    #sidebar p{overflow:hidden;}
    #sidebar_top p a{float:left;}
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  5. #5
    SitePoint Enthusiast
    Join Date
    Aug 2008
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes! Thank you! I checked on 3 browsers and it's back to normal now. Thank you.

  6. #6
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    You can also remove the display:inline-block along with some other things Ralph told you to add. Remove one or two at a time to see which ones you actually need (if you aren't sure)
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work


Bookmarks

Posting Permissions

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