jordan_windebank — 2011-06-28T20:23:16-04:00 — #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:
ralphm — 2011-06-28T20:30:22-04:00 — #2
Hi Jordan. Welcome to SitePoint.
Just remove display: inline from here:
<font color='"Red"'>display: inline;</font>
jordan_windebank — 2011-06-28T20:41:28-04:00 — #3
Ahhhh so easy, thanks Ralph!!
rayzur — 2011-06-28T20:46:09-04:00 — #4
You can also just float your list-items left rather than using absolute positioning.
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
rayzur — 2011-06-28T21:18:15-04:00 — #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.