• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 257
  • Last Modified:

PC/Mac relative position difference


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:


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.
  • 3
1 Solution
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.
Here is what I got.

I will post the markup and CSS below.
First I made the new footer. Please excuse the styling in the screenshot - Firebug is a paint to edit HTML in.

Then I moved the current div.links into the new footer.

Then I made the div.links auto align in the center.

Then I made the first link float left, the second float right.

Here is the markup, including the footer_left and footer_right (which are collapsed)

<div id="footer_left">
  <!--Footer Left Content. Not div.links has been moved -->
<div id="footer_right">
  <!--Footer right content. Not shown here. -->
<div id="newfooter">
  <div class="links">
    <div class="link" style="float:left;">Privacy Policy</div>
    <div class="link" style="float: right;">Terms of Use</div>

Open in new window

Here is the quick CSS I used. Obviously you can change this as necessary. I would note that all of you CSS for the .links and .link are nested elements, meaning you will have to renest the CSS selectors.

#newfooter {
  width: 100%;
  float: left;
  height: 20px;

.links {
  width: 230px;
  height: 20px;
  margin: 0pt auto;
  font-size: 11px;

Open in new window

This to me seems like the easiest way to get those spaced the way you want.
SpiderstaveAuthor Commented:
This works perfect! Outstanding solution and support. Thank you!
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now