SitePoint Sponsor

User Tag List

Results 1 to 5 of 5

Hybrid View

  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,173
    Mentioned
    454 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
    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

  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)
    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.

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


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
  •