PC/Mac relative position difference

Posted on 2011-04-26
Last Modified: 2012-08-14

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.
Question by:Spiderstave
    LVL 13

    Expert Comment

    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.
    LVL 13

    Expert Comment

    Here is what I got.

    I will post the markup and CSS below.
    LVL 13

    Accepted Solution

    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.

    Author Closing Comment

    This works perfect! Outstanding solution and support. Thank you!

    Featured Post

    Find Ransomware Secrets With All-Source Analysis

    Ransomware has become a major concern for organizations; its prevalence has grown due to past successes achieved by threat actors. While each ransomware variant is different, we’ve seen some common tactics and trends used among the authors of the malware.

    Join & Write a Comment

    Have you tried to learn about Unicode, UTF-8, and multibyte text encoding and all the articles are just too "academic" or too technical? This article aims to make the whole topic easy for just about anyone to understand.
    Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
    In this Micro Tutorial viewers will learn how to create a CSS image sprite (In a later tutorial, viewers will learn how to use CSS and HTML to create a navigation menu using this sprite) Open a new Photoshop document with a width of (Icon width)x(N…
    In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…

    746 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    20 Experts available now in Live!

    Get 1:1 Help Now