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:
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
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
The color
#c62119
is exactly 90% of#dc251c
.Items to check:
opacity
on either the element itself, or an element that would be covering itrgba
) (again, on the element itself, or one covering it)border-style
set toinset
,outset
, etc.