15

I have a popup that comes up over a blanket div that greys out the entire screen, but I don't like its positioning. So I tried to manually enter left: and top: elements into my CSS, but when I look at Chrome's console, there's this element.style {} that's overriding my code.

I've searched my CSS file for element.style and for 597px and 794px and I don't get hits on any of them.

What is this, and why does it have the values that it has?

enter image description here

Brian Powell
  • 3,158
  • 4
  • 30
  • 59

4 Answers4

17

element.style is a part of your browser devtools that indicates the inline style of the element which has a higher specificity value than any CSS selectors.

That inline styles may be added by a JavaScript code, if so, you can override that declarations by using !important keyword within your stylesheet (e.g. left: 610px !important).

Hashem Qolami
  • 93,110
  • 25
  • 145
  • 156
9

element.style refers to inline styles on the dom element. For example:

<p style="color:#cc0000;">Foo</p>

the color of that paragraph would show up under element.style.

You can fix with your css by doing this:

#popUpDiv[style]{
    left:610px !important;
    top:0px !important;
}

HTH -Ted

Ted
  • 14,459
  • 2
  • 36
  • 55
2

That's probably manipulated and set by javascript (either that or you edited the element.style{} rule yourselves on the developer tools console).

Look for javascript code that changes the display, top and left properties of #popupDiv

thanix
  • 1,287
  • 9
  • 5
1

It is the style that you have in the HTML file. try to delete or change the style in HTML.

Ahmad Shommari
  • 11
  • 1