0

I have this piece of code on my website:

<div class="test_section no_display" id="test_section_metric">
      <div class="section_start_bar">

      </div>
      <div class="section_end_bar">

      </div>
</div>

And this piece of css:

.test_section
{
    width:70%;
    margin-left:15%;
    background-color: var(--color_main);
}

.no_display
{
    display: none;
}

But the div with "no_display" class is displayed, because when I inspect the site in Chrome I see that it overrides it with user agent stylesheet like this:

div{
    display:block;
}

However, when I open the site just as a file on my computer it is actually not displaying and is working as intended.

I've already searched for an answer, but I've mostly encountered people fixing it by putting a <!DOCTYPE html> before the <html> tag, which I've already done.

The .no_display class is a separate thing, because it'll be removed with javascript to show things on a button click.

Any ideas how to fix this?

Mr Lister
  • 45,515
  • 15
  • 108
  • 150
Double V
  • 11
  • 2
  • The problem is not in this code. Please post more of it. Also, check in your CSS if you have a style `#test_section_metric` for the `id` of the div. – Ivan86 Dec 21 '17 at 18:58
  • Can we see the actual website, or do you have a plunkr showing this behaviour? – David Dec 21 '17 at 18:59
  • Try `display: none!important;` – Rick Sibley Dec 21 '17 at 19:49
  • Look at `Computed Style` tab, it is like a summary of all the styles that are affecting an element. It will probably have `display:none` since most styles on an agent sheet were meant to be overridden. – zer00ne Dec 25 '17 at 22:46

1 Answers1

0

using css property display: none !important; will override the user agent setting. bonus points for checking that your class name and css class selector are spelled the same

homeworkmon
  • 21
  • 5
  • Using the `!important` rule is generally considered to be **a really bad idea**. This is because it can cause problems down the road when it comes to "debugging" your CSS. See [MDN Docs](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity#the_!important_exception) – joeldesante Aug 26 '21 at 21:04
  • @joeldesante Not in some cases. If OP cannot control the user agent setting, this kind of is a last resort. Read other devs discussion in [here](https://stackoverflow.com/q/8360190/6670491). – HardcoreGamer Aug 27 '21 at 07:33