Pixel difference between Chrome and FF

Question

I am trying to do it " step by step ", but I am having pixel problems the difference between chrome and FF .

So, all the steps are dynamic and should be in the middle, sometimes only two, three of our 5 options may appear, that's why I make a sub-line for each side to get to the end of the wrapper.

These lines are a problem, they make 2 of our differences in 1 pixel.

Am I missing something or should we do a workaround in this case?

will be simpler if you see here: jsfiddle

for those who want to see the code right 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 crosses all faces in the middle of the steps.

Answer 1

Well, I (like many others who commented) did not see the same difference that you show between my Chrome browser and Firefox, and none of the browsers behaved for me, since you show what you need in the picture.

However, I noticed some odd line behaviors when increasing and increasing the number in browsers. This made me look carefully at your code, and I feel that the reason you see some differences (and inconsistencies for all of us) is due to the way you positioned the lines. I recommend the following changes (I will only mention those, not all your code), as shown in this script , which can solve your problems.

Explanation

vertical-align usually bottom by default on inline-block , and since you position your .base-[left/right]-line elements at the top position, it’s best to do this for elements inside .step that should overlap them. So that...

ADD

 .step { vertical-align: top; /* ADDED THIS so that dimensions come from the top */ } 

EDIT

 .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 */ }