We help IT Professionals succeed at work.

Check out our new AWS podcast with Certified Expert, Phil Phillips! Listen to "How to Execute a Seamless AWS Migration" on EE or on your favorite podcast platform. Listen Now

x

PC/Mac relative position difference

Spiderstave
Spiderstave asked
on
Medium Priority
266 Views
Last Modified: 2012-08-14
Hello,

I'm trying to do something pretty simple, add a couple of links to a footer. There is a design element in the footer (an arrow pointing down) and the links are supposed to perfectly line up on each side of the arrow. On a Mac (Firefox/Safari) it lines up perfect, but on PC (Firefox/IE) it is offer:

http://spincreativegroup.com/company/

It's the "Terms of Use" and "Privacy Policy" links at the bottom.

If I get it lined up perfectly on PC (Firefox & IE) it's off on the Mac (Firefox & Safari). I'm position with position: relative; but I've tried 3 different ways of positioning it and it's off in the same way each time. The only way I know to fix this is to detect the platform and write out different CSS for it, but there is no browser detection on the site, and it seems excessive to add it for something so minor.

So, any ideas on how to fix this without browser detection using CSS?

Thanks for any assistance! I've run into similar issues a few times, where Macs and PCs just seem to interpret the number of pixels differently or something.
Comment
Watch Question

Top Expert 2011

Commented:
I messed around with this for a few minutes and I have a direction for you to move in.

I would recommend creating a new div below the footer_left and footer_right.  Make this div 100% of the width of the footer.

Then give your link div that is holding the smaller links a margin: 0pt auto, so it floats center in the middle of the div.

From there you simply have to space the margins/paddings of the links and it should be pretty easy to get there.

I got it in a couple minutes, but all the code is in Firebug so it is hard to copy out of there.

If you want a further markup of this, let me know. However, working in this direction should get what you want.
Top Expert 2011

Commented:
Here is what I got.

 SS
I will post the markup and CSS below.
Top Expert 2011
Commented:
Unlock this solution and get a sample of our free trial.
(No credit card required)
UNLOCK SOLUTION

Author

Commented:
This works perfect! Outstanding solution and support. Thank you!
Unlock the solution to this question.
Thanks for using Experts Exchange.

Please provide your email to receive a sample view!

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.