pixel difference between Chrome and FF - html

Question

I'm trying to make a "step by step", but i'm heaving some problems with pixel difference between chrome and FF.
so, all steps are dynamic and should be in the middle, some times can appear only two, three our 5 options, thats why i'm making a sub-line for each side, to reach the end of the wrapper.
This lines are the problem, they are making 2 our 1 pixels difference.
i'm missing something or in this case, we should make a "workaround" ?
will be more simple if you see in action here: jsfiddle
for those who wants to see the code directly here:
html:
<article id="people-add">
<nav>
<div class="step-wrapper">
<div class="base-left-line"></div>
<div class="step first-step">
<div class="active-stepc step-circle"></div>
<span class="step-label">
Step 1
</span>
</div>
<div class="step">
<div class="step-line"></div>
<div class="step-circle"></div>
<span class="step-label">
Step 2
</span>
</div>
<div class="step">
<div class="step-line"></div>
<div class="step-circle"></div>
<span class="step-label">
Step 4
</span>
</div>
<div class="step">
<div class="step-line"></div>
<div class="step-circle"></div>
<span class="step-label">
Step 5
</span>
</div>
<div class="base-right-line"></div>
</div>
</nav>
</article>​
and css:
#people-add {
float: left;
width: 100%;
}
#people-add nav {
padding: 5px 0 60px 0;
}
.step-wrapper {
float: left;
width: 100%;
text-align: center;
position: relative;
}
.step {
display: inline-block;
position: relative;
width: 120px;
}
.first-step {
width: 0 !important;
}
.step .step-label {
position: absolute;
right: -35px;
bottom: -30px;
font-size: 12px;
width: 96px;
text-align: center;
font-weight: bold;
color: #818181;
}
.step .step-line {
border-bottom: solid #E5E5E5 2px;
position: absolute;
right: 5px;
top: -2px;
z-index: 12;
width: 120px;
}
.step .step-circle {
background-color: #B3B3B3;
border: solid 4px #E5E5E5;
width: 20px;
height: 20px;
border-radius: 50px;
position: absolute;
right: -1px;
top: -15px;
z-index: 13;
}
.base-left-line,
.base-right-line {
position: absolute;
width: 50%;
top: 12px;
z-index: 1;
}
.base-left-line {
border-bottom: 2px solid #9BBD5E;
left: 0;
}
.base-right-line {
border-bottom: 2px solid #9BBD5E;
right: 0;
} ​
print:
as you can see, the green line in FF are crossing all over the graylines in the middle of steps.

Answer 1

Okay, I (just like many others who commented) did not see the same difference you show between my Chrome and Firefox, and neither browser was behaving for me as you show you desired in your picture.
I did, however, note some odd behaviors of the lines when I zoomed in and out in the browsers. This lead me to look more carefully at your code, and I feel that the reason you are seeing some differences (and the inconsistencies for us all) is because of how you have positioned the lines. I recommend the following changes (I only note those, not all your code), as seen in this fiddle, which may fix your issues.
Explanation
The vertical-align is normally bottom by default on inline-block, and since you are positioning your .base-[left/right]-line elements by a top position, it is better to do so for the elements inside the .step that are intended to overlap those. So...
ADD
.step {
vertical-align: top; /* ADDED THIS so that dimensions come from the top */
}
CHANGE
.step .step-label {
bottom: -45px; /* CHANGED THIS for the vertical align top */
}
.step .step-line {
top: 12px; /* CHANGED THIS, which now matches offset of the baselines */
}
.step .step-circle {
top: 0; /* CHANGED THIS */
}