CSS margin issue - Webkit only

HTML & CSS
1

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. :lol:

Cheers,
Jordan

2

Hi Jordan. Welcome to SitePoint. :slight_smile:

Just remove display: inline from here:

#follow_me_list {
  [COLOR="Red"]display: inline;[/COLOR]
  margin-left: 100px;
  position: relative;
}
3

Ahhhh so easy, thanks Ralph!! :slight_smile:

4

You can also just float your list-items left rather than using absolute positioning. :wink:

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

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.