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?
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).
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
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
It is the style that you have in the HTML file.
try to delete or change the style in HTML.
Related
Is there a way to change the default block cursor used by Shellinabox to a vertical bar?
Using Chrome's inspector tool, I found this div:
<div id="cursize" style="left: 675.5px; top: 160px; visibility: hidden;">143x20</div>
but altering the value does nothing.
There is nothing about a cursor size in the page's styles.css file or any of the config files found in /etc/shellinabox/options-available.
If you know of a better place to ask a question like this, please tell me.
Those inline styles have been generated dynamically through means of something like JavaScript. Considering they are generated dynamically, simply manipulating their values won't reflect any change.
Having said that, you can override them with the !important declaration. Typically !important should only be used as a last resort, but inline styles have the second-highest level of specificity, and !important is the only way to override them.
Using something like the following should work for you:
#cursize {
left: 500px !important;
top: 100px !important;
}
Hope this helps! :)
i'am new to mkdocs, here is what i'm trying to do:
add a caption to images and use a css style to use a shorter margin-bottom
i managed to install a python-makdown extension "captions", so if i use
: my sub caption
i'll get
<figure><img ...><figcaption>...
in html. Unfornutately the spacing (css: margin) is to big so i included a css file to remove the default values. Inspection in my browser now shows me, that base.css overwrites my style, so margin remains at default.
How can i overwrite base.css styles with my own styles?
As i wrote in my comment, !important guarantees overwriting:
figure img {margin-bottom: 0px !important;}
But I don't understand why...
If you use your browser's developer tools to inspect the img element...
You can see that the img is defined with a rule for div.col-md-9 img. that is, any img tags under the div with a class of col-md-9.
We can see that (as explained in CSS Precedence) the original rule uses one class attribute and two element names for a specificity of 0012. You need something of equal or higher specificity. But figure img only gives you 0002, which is lower.
To override that, you need at least the same level of specificity:
I'm sure various other permutations would give a working result as well. But we have a working solution, so why keep going. And thanks to the "inspect" tool, it was pretty quick and easy to resolve.
Rather than tweaking the CSS, it might be easier to try a different plugin, such as img2fig
Im using google places api for a place autocomplete search - the user starts typing and results pop up.
I've styled the google container using !important to override the styles. So for my desktop css through media queries I have something like:
bottom: 100px !important;
top: auto !important;
Now on my mobile css, again through media queries, I need to move the position, I need the default styles back - the styles are controlled via google in the style tag on the element. But as I have used important i cannot remove them. I have tried:
bottom: auto !important;
Which fixes the bottom position, but how can I remove the top position so that it defaults to what is in the style tag on the element. I've tried:
top: auto !important;
top: inherit !important;
But with no luck.
Using that many !important 's is messy.
A few suggestions: (based on the little code your showing)
2. Don't override an :auto with an :auto. Try to override the styles with a number that give you similar look as :auto
3. Try removing all !important s and call the unique CSS within their perspective media query resolutions, properly. eg.
#media screen and (min-width:320px) and (max-width:480){
... // Your unique styles to Mobile Here
}
4. If all else fails; though, don't know why it would. You can .toggleClass with jQuery to attach a class within a condition. And .removeClass whenever you want. A simple fiddle of .toggleClass (demo) here.
But you really should just be able to clean up your CSS and put everything in their specific media query defined resolutions.
You should be able to do this by increasing specificity on your mobile css file and adding an !important value to this new value in the mobile stylesheet.
I'm not sure of your structure without seeing your html but if you can add an additional class or id to the parent container/element that is specific to mobile css and use that to target your mobile view
for example
#mymobile .classtooverride {newstyles !important;}
I have a page where the UL is set to padding-left: 40px and I can't find where it is being set. In firebug it shows in 'computed' but isn't in the inherited styles list. I've tried removing the jquery in case it was set in js. I've removing the css - it's still there. I've set a breakpoint on attribute change - nothing.
Setting padding-left:0px doesn't fix IE7
Is there a plugin or some better way of inspecting applied css rules?
It's probably a browser default. If it's not in firebug's style tab, it's being applied by the browser itself.
To get Firebug to show user-agent defined CSS, click on the style tab drop-down and click "Show User Agent CSS" (thanks Gerben).
You can override styles that are set by the user-agent, simply by defining the style attribute for that element:
ul{
padding-left:20px;
}
Note that IE7 uses margin instead of padding as the default style for lists.
You can 'reset' all user-agent defined rules using something like Yahoo's reset stylesheet.
You can also 'normalise' the style applied to a page. This means overriding user-agent defined styles so that all browsers use a standard style. I personally prefer this method over 'resetting' the CSS and having to explicitly define CSS rules for everything. It's easier and takes up less space. Try this library.
That padding-left on ul is coming from the user agent stylesheet.
You can remove it with:
ul {
padding-left: 0;
margin-left: 0
}
Firebug is already the best Firefox plugin for this sort of task. You just need to enable this option:
I am using Joomla 1.5.
i am having a page where a cSS has been added for the title
which is in <strong></strong>
I firebug it , it appears as
element.style {
color:#666666;
}
i dont know of from where it comes from..
but i am having a css applied for the same tag with other color. but it disappeared.
How to remove the element.style globally..
It is possible to override inline styles from an external stylesheet
strong[style] { color: blue !important; }
This works in most major browsers, Chrome, Safari, Firefox, IE8
It doesn't work (to my knowledge) in IE6 / IE7
Hope this helps.
This code comes from HTML and not from your CSS.
This HTML with generate your element.style:
<strong style="color:#666666;">Just text</strong>
Element.style, as the name says, its the style defined on element and there is no way to override it. If you do not want that color in that element you must remove/change it on html.
It seems it is not always set in HTML. In My case the element.style is empty:
element.style {
}
It is not set in any css and it is not set in any html source.
I dont't know where else I should look.
Inline styles are generated from HTML or (more often these days) javascript applying styles after the page had loaded.
Jquery is often a culprit of this, performing animations using css applied directly on the element that overrides your stylesheet.
For instance you may show, then hide a div, leaving a 'display:none' on the element that overrides any naturally cascading CSS that precedes it. This comes up often when you are mixing CSS transitions and media queries with javascript.
Check your JavaScript for any instances of applied styles.
Try using a callback function on the animation to clear styles:
$(this).css( "display", "" );