skip to Main Content

My “currently selected” navigation element uses a red (#dc251c) indicator bar created as the background to an empty div. I also have a “special notice” text banner that has a red (#dc251c) top border.

These two red bars are shown immediately adjacent, and clearly are not the same color:

enter image description here

The navigation element is created via an empty div with the class “active-marker” inside the li.

<div class="active-marker"></div>

And the Inspector confirms the Style is

.menu li .active-marker {
    display: none;
    position: absolute;
    height: 5px;
    bottom: 0px;
    width: 100%;
    background-color: #dc251c;
}

and the Computed background-color is #DC251C.

The announcement border is created via a div with colored top (and bottom) borders:

<div class="current_campaign text-campaign pull-center">ETC</div>

Which Inspector confirms is the correct CSS:

.text-campaign {
    font-size: 33px;
    border-top: 3px solid #dc251c;
    border-bottom: 3px solid #dc251c;
    background: #ffffff;
    padding-bottom: 1px;
}

and Computed verifies that border-top-color is #DC251C

If the problem was that these reds looked different on different machines, monitors or browsers I’d understand. Or if one was specified as HEX and the other was RGB. But I can’t figure out how the same HEX value looks different on the same page (whether viewed in Chrome, Firefox, and Safari).

Here are some clues:
– loading the screenshot into Photoshop indicates that the navigation color is the correct red (#dc251c), and the text notice border is wrong (#c62119).
– if I manually change the navigation highlight to #c62119 in the Inspector then the two reds match.
– the problem only appears at the widest size (it’s a responsive design). the design is different for the narrowest size, but looks correct for the intermediate size.

Any clues or suggestions on how to fix (other than changing the notice borders to something completely different, which is my workaround strategy)?

Thanks!
julie

P.S. This code is from a RoR+bootrap framework built by a developer I’m working with. So there may be some other information that would be useful – please let me know.

2

Answers


  1. Chosen as BEST ANSWER

    Shadow for the win! Thanks partypete25 and jcaron.

    I figured some sort of test case would be needed, but I really had no idea where to even begin to create it based on the framework.

    However, using the Inspector and turning off the presumably correct border-top revealed the shadow underneath.

    Thanks for a great first-stackoverflow-post experience. j


  2. The color #c62119 is exactly 90% of #dc251c.

    Items to check:

    • opacity on either the element itself, or an element that would be covering it
    • a color with an alpha component (rgba) (again, on the element itself, or one covering it)
    • shadows
    • border-style set to inset, outset, etc.
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search