I have the following script:
http://jsfiddle.net/oshirowanen/8mQ7x/1/
Which works fine, but as soon as I change to external css to add the background image using inline css methods, it stops working, as demonstrated here:
http://jsfiddle.net/oshirowanen/8mQ7x/
I need part of it to be inline css because the html is dynamically generated. I am trying to create many generic icons using different images for each icon, but using a generic css external file to cause the mouse over effect.
Why does this stop working when inline css is used to add the image and how can I get this to work?
Because elements style CSS rule has higher priority than other CSS rules. By background in element style you are rewriting not only default background, but :hover too.
You should rewrite only background-image. Example: http://jsfiddle.net/8mQ7x/3/
Related
I am looking to know if there's a way to override the CSS of a Vue component which has been loaded in the browser.
The component is being worked on by a different developer and is being pushed live independently of the parts of the page I'm working on.
I've tried the following:
using the !important tag
trying to increase css specificity
using the :host() & :root() selectors to try and override the component css
However none appear to work and it appears that the component also generates a style="" in the tags so the CSS is embedded at that level within each tag.
Just wondering is there any way of applying CSS in the base HTML file that would override the CSS of the component.
Thanks for any help with this.
I'm working with wordpress and have been removing the width and height attr's when adding images as they are added automatically, however I have been sizing the images via stylesheet:
.foo img {
max-width:500px;
width:100%;
}
After doing a little reading it seems the inline attr's help with page loading times so I was wondering:
Should I use one or the other or both?
Will the inline attr override the css?
They should be added inline to help with page loading times, as you mentioned. Inline styles will win against external style sheets, but style sheets will override height and width attributes.
In other words, <img height='300' width='300'> can be overridden in an external style sheet, but not <img style='height:300;width:300'>.
You should use the external sheet if you want all images class foo width the same attributes. The width pixels determine the resolution, the width percentage determines the stretch. Inline will override the external sheet.
External style sheets are used to organize your design and can be cascaded. The advantage of using external style sheets is that you can make changes to one or more independent style sheet files without having to modify inline attributes in the main markup. In this way, you can easily change style properties.
You can use inline styling that will override style sheet properties in most cases but the syntax and format should be correct.
It really depends on what you want to do but I usually prefer external styling as this allows a designer to design (via external style sheets) independent of the developer.
Please refer to http://www.w3schools.com/css/css_howto.asp
I'm experimenting with responsive SVG files, and really want to select the appropriate image independently from the HTML page.
I want to have a setup, where I can pass in an SVG to an img tag, without any further dependency. Then have the SVG rendered before it gets returned in order to display.
As far as I noticed, if I put a style tag into the SVG, then it gets evaluated after the page has loaded, and can access page's DOM elements only, not encapsulated "in-SVG-only" elements. The only way to evaluate styles before loading the page is to put CSS into a style attribute of the entire svg tag. And having media queries there would be awesome.
Does this make sense to you? Is it possible at all?
Inline style attributes don't support media queries.
I've added a TrustPilot Widget to my Website.
I want to overwrite the current stylesheet being imported from TP. I thought I'd just add a class around the div and then style it in the css with the use of !important however all attempts have failed.
I was wondering if anyone has a solution for this?
You have to manipulate it through javascript as they write the sprite image in the element itself, witch overrides any other style rule.
a simple jQuery
$("#tp_widget div").attr("style", "");
here's a live demo on how to custom the top header: http://jsbin.com/usadit/3/
and you can edit it through the /edit url as: http://jsbin.com/usadit/3/edit
I am first time poster. A question. How do a make a css declaration that only works within one DIV, but, not overwriting the global css? I want to jQuery loading a page into a DIV, however, the page's CSS changed my own site's CSS. I don't want that. Also I can't just take out CSS because I want them looked as intended from the source.
Basically we are going to load an external HTML with its CSS style applied locally ONLY without it changing the style elsewhere. The external HTML is not using inline CSS since we don't have control over it. They are applied to class values or even all element type. We don't want their CSS declaration modifying our own existing CSS outside of the DIV container.
Is this even possible?
Thank You?
If I understand your question correct you would place an id in the div <div id="mystyle"> content </div>. In your CSS you would write #mystyle p { color:red; }. which have no effect on global paragraphs outside the "mystyle" div.
I guess you are asking how to apply an external stylesheet to just one div. There is no way to do this using just CSS. You might be able to emulate this using JavaScript, but it's going to take quite a bit of work. Here's an outline of how you might go about doing this:
Grab the stylesheet filename from the loaded HTML and then get the contents of the CSS file via AJAX.
Somehow parse the CSS and prefix your div ID to each CSS rule, so that it applies only within your div.
Inject the modified stylesheet as inline text into the loaded HTML.
Steps 1 and 3 are relatively simple, step 2 requires a CSS parser written in JavaScript. (There seems to be one available here although there is no documentation.)