1

In developing a web application, I'm having issues identifying the source of CSS style overrides. Based on the answer to this question: Chrome Developer Tools: How to find out what is overriding a CSS rule?, I attempted to identify the source of the computed style using Chrome's integrated dev tools.

I expected the border-left-width property to be 2px, as explicitly defined in the page_not_found class rule. The computed style dialog shows the following:

chrome computed style snippet

Clearly indicating:

  • The computed value is 0px
  • The computed value was derived from a single style rule defining an intended value of 2px

Clearly, 0px != 2px, so where is this computed value coming from?

Liam C
  • 315
  • 2
  • 11
  • Try scrolling down on the "computed" window and clicking on the offending style, it should tell you where it's from. – Libra Oct 11 '19 at 22:51

1 Answers1

0

I've identified the issue. The rule for the border did not have a border-style set, so Chrome recomputed the width to 0px, with no indication that that was the reason within the computed styles dialog box.

Liam C
  • 315
  • 2
  • 11