PC/Mac relative position difference

Posted on 2011-04-26
Medium Priority
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
  • 3
LVL 13

Expert Comment

ID: 35471456
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

ID: 35471479
Here is what I got.

I will post the markup and CSS below.
LVL 13

Accepted Solution

jonahzona earned 2000 total points
ID: 35471507
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

ID: 35471768
This works perfect! Outstanding solution and support. Thank you!

Featured Post

How to Use the Help Bell

Need to boost the visibility of your question for solutions? Use the Experts Exchange Help Bell to confirm priority levels and contact subject-matter experts for question attention.  Check out this how-to article for more information.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.
Suggested Courses

850 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