如何防止CSS正文影响特定的Div？

Question

I recently started using Filegator as a file manager for my website, and in my quest of integrating it in my website's design i added my website's header to it.

My problem is that a couple parts of my header seem to be affected by some css rules from Filegator, more specifically some kind of margin/height not being respected. The part of the header in question is a simple div with the following css :

#account {
    position: absolute;
    text-align: left;
    left: 0;
    top: 0;
    font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
    font-size: 15px;
    color: #3F3F3F;
    margin-left: 10px;
    margin-top: 10px;
    padding: 0 10px 0 10px;
}

After some research i noticed that i comes from a css file name foundation.css and that, inside, if i delete this particular line of code my header goes back to normal :

body
{
    background: white;
    color: #222222;
    font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
    font-size: 14px;
    line-height: 1;
    position: relative;
    webkit-font-smoothing: antialiased;
}

Thing is that line of code is essential for the file manager, so i tried adding the famous :not() like this :

  body:not(#account)
{
    background: white;
    color: #222222;
    font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
    font-size: 14px;
    line-height: 1;
    position: relative;
    webkit-font-smoothing: antialiased;
}

But body:not() did not change anything.

It gets even worse if i write it with a space between body and :not()

Does anyone have suggestions to help me with this ? Any help would be really appreciated

Thanks

-Apatik

Answer 1

the only rule that you don't override seems line-height, so you could try to explictly set or unset this in you 'account.

#account{
  ...
 line-height:0; 
}