top:1px calculated differently in chrome and FF

Question

I was just recently debugging a site SEE HERE, Now if you scroll to the section immediately after the banner , the section with the accodion.

As you can see from the above image that the active tab has a top arrow that faces upwards. the css code is as follows:

.hm-our-products-main-showcase .accordion-list-items > li.active > a {
    font-weight: 900;
    position: relative;
    top: 1px;
    background: url(../images/res/active-accordion-tab.jpg) no-repeat center bottom;
}

Notice how postion:relative and top:1px are used to cover the border that passes below, giving the impression that the active that has just an arrow and no bottom border. Now this works fine in chrome but in FF there is a small problem the 1px does't quite get the arrow down enough to cover the border and the arrow on the active tab looks like below:

See how the arrow does quite cover the bottom border. What is the solution to this ??

P.S. i can't used top:2px because then in chrome things look a bit bad.

Answer 1

Actually, this depends on OS-level and browser-level zoom. Looks like your font doesn’t actually have bold glyphs, so to apply font-weight: bold, browsers are forced to generate bold glyphs based on normal glyphs and do this differently.

Given that your menu items are inline-blocks, you should add vertical-align: bottom to them for their bottom edge’s position to be unaffected by rasterization rounding errors and therefore predictable and consistent across browsers:

.hm-our-products-main-showcase .accordion-list-items > li {
    vertical-align: bottom;
}

By the way, I would recommend you to get rid of shifting the active link itself by 1px to bottom (i.e. remove position: relative; top: 1px; from the active link’s styles), and use an absolutely-positioned CSS-generated pseudoelement instead:

.hm-our-products-main-showcase .accordion-list-items > li.active > a {
    position: relative;
}

.hm-our-products-main-showcase .accordion-list-items > li.active > a:after {
    background: url(active-accordion-tab.jpg) no-repeat;
    content: '';
    margin-left: -7px; /* Half the width to center the arrow. */
    position: absolute;
    left: 50%;
    bottom: -1px; /* Compensating menu's border-bottom. */
    width: 14px;
    height: 8px;
}

Answer 2

Change your top:1px to top:1.5px it works perfectly fine on both browsers i.e. Chrome and Firefox.

.hm-our-products-main-showcase .accordion-list-items > li.active > a {
    font-weight: 900;
    position: relative;
    top: 1.5px;
    background: url(../images/res/active-accordion-tab.jpg) no-repeat center bottom;
}