SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Enthusiast
    Join Date
    Jun 2011
    Location
    Singapore
    Posts
    29
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS margin issue - Webkit only

    Hi all, I am writing up my first site in over 5 years and whilst I've needed to brush off the cobwebs, I have gotten through the simple design fairly quickly. I am having only a single issue in that the image list in the footer with social media links is losing it's left margin in Chrome/Safari.

    Matcho Suba - matchosuba.com

    Appreciate if anyone can provide some insight in to what is going on please? I didn't need to worry about Chrome or Safari back in the olden days.

    Cheers,
    Jordan

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,321
    Mentioned
    462 Post(s)
    Tagged
    8 Thread(s)
    Hi Jordan. Welcome to SitePoint.

    Just remove display: inline from here:

    Code:
    #follow_me_list {
      display: inline;
      margin-left: 100px;
      position: relative;
    }

  3. #3
    SitePoint Enthusiast
    Join Date
    Jun 2011
    Location
    Singapore
    Posts
    29
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ahhhh so easy, thanks Ralph!!

  4. #4
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    You can also just float your list-items left rather than using absolute positioning.

    EDIT:

    You would need to float your <p id="follow_me_text">Follow Me </p> to the left also
    Then remove the neg top margin from copyright.

    That will line everything up with floats

  5. #5
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    That "Follow Me" text could actually be a sibling <li> (without an anchor) and then it would catch the float in the li styles.

    Using floats will eliminate all the positioning and trim down your CSS as well.


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
  •