I have this problem and I don't know how to fix it. In my project many html files have defined for div an width style, for example:
<div style="width:200px" id="boom">/*****/</div>
In css file if I put a condition like:
`div#boom{width:auto !important;}`
is ignored because style is defined in html for that div and from what I know html condition beat css condition.
How is possible to fix that? I don't want to edit all html pages because I would take a long time.
You are doing something wrong. Because !important makes the style the highest priority, so it always use the width: auto; and not the inline CSS.
An live example that this works: http://tinkerbin.com/wzrFiyaq
And a tutorial: http://css-tricks.com/override-inline-styles-with-css/
div[style] {
width:auto !important;
}
Related
I have made a complete Bootstrap grid system. I am now uploading my code to a CMS system, and can see there is some CSS from the backend, there is messing up my grid.
If I untick the following code in the inspector window, everything is looking perfect. When the following code is ticked in the inspector window everything is messed up. Is it possible to overwrite this code somehow, so the class is not used?
.cms-area img {
width: 100%;
}
You can use !important in such cases but use it sparingly. Best is to remove the unwanted code and not use !important. !important might cause issues later that are difficult to debug. If possible include your css after other css is included in the code. In CSS, rules that appear later take precedence over earlier rules
Edit:
Set width to auto instead of 100% to fix your alignment issue
Below given is the ideal way to manage css since it allows you to attribute your style content and lets you override the style already applied elsewhere.
.cms-area .your-class img {
width: <your choice>;
}
I have a weird one that I can't seem to be able to figure out. I am new to CSS and decided to use bootstrap to assist with styles etc.
the problem I have is when I try to assign two classes to a div element, 1 being the bootstrap column and another from my own stylesheet.
the code from my stylesheet seems to be ignored in some cases. now i have taken that one bit of code and css out and put it into the jsfiddle but it works fine. its only when combined with the rest of the html does it seem to have issues. also note that if i use inline styles it works...
I copied the entire code to js fiddle now so that you guys can replicate the issue. the section I am having issues with is the 4 images that are side by side
class="services-boxes"
anyway any assistance will be appreciated, as well as general feedback as I am new to this all! :)
https://jsfiddle.net/d9bv0grx/1/
Due to the way cascading style sheets work it (styles are be applied in order AND by specificity). It is most likely that styles you are expecting to see are being overridden by specificity.
Give this guide a read.
An example is that for <div id="selector">
#selector {background-color:red;}
div {background-color:green;}
You can expect to see a div with a red background, even though the green background is set afterwards, the id selector has greater specificity.
Then try and alter the specificity of your selectors in your css so that they will take precedence over in bootstrap.
Also just going to add, you have casing issues - you declare the class with lowercase in css, capitalised in your html.
You also have syntax issues in your css. Your css should look like:
.services-boxes {
padding:0;
max-height:500px;
width:100%;
}
Sort all this and you should be golden! jsfiddle
Looks like a combination of syntax errors. Your style should be declared like this:
.services-boxes {
padding:0px;
max-height: 500PX;
width:100%;
}
Note that the class is all lowercase (which should match style where declared which is currently Services-Boxes), a colon separating property and value (you has used = in some instances) and one set of curly braces per declaration (the above class .logo-image has 2 closing braces). Just a bit of formatting should see your code recognised
When you don't have total control over your HTML, you can use the !important property in css to give a priority to your styles.
.services-boxes {
color: red !important;
}
However keep in mind that you have to avoid the !important property as much as possible and do not use it unless you can't do it any other way.
I have a situation where a multiple select is somehow getting it's width via javascript dynamically but I can't seem to find where. I have nothing in my CSS that specifies a width of 411 px.
Website of Problem here
The width of the sidebar is the same always so I tried the following CSS and it is ignored? Am I missing some syntax? I've tried both of these and they do not work:
#widget-wrap .chosen-container-multi {width:200px !important;}
and
.widget-wrap .chosen-container-multi {width:200px !important;}
the control misbehaving is ul.chosen-choice so please set css as follows:
ul.chosen-choice {width:200px !important;}
There seems to be some inline styles declared in the widget template itself, rather than generated with JS.
Ideally you should remove the inline style from the template; otherwise this CSS will work just fine:
.chosen-container {
width:123px !important;
}
I can't see why your existing CSS wouldn't work other than it simply not being uploaded.
I need to basically set the content of something with HTML from CSS. I'm currently doing the following:
.myclass {
content "<img src=\"hello.png\"/>";
}
However, instead of the image, I see the literal text:
<img src="hello.png"/>
How can I inject arbitrary HTML using CSS?
HTML stores the data, and is the Model
CSS stores the styles, and is the View
JS stores the interactions, and is the Controller
If you're trying to add data to the page, it should be done via HTML. If you're simply trying to add an image as a style, use the background-image property. You don't need to inject an <img> element in the page to do that.
Don't ever do this, ever
As far as being able to inject HTML into the page via CSS, it's not directly possible, however it's possible to add JavaScript into the page using CSS, which can then add HTML to the page.
I can't emphasize enough how wrong that approach would be.
Unless there is some strange hack that I am not aware of, this cannot be done with pure CSS.
The content property is only able to insert text; if you try to put in HTML, it will be escaped.
That said, you can do something like this with pure CSS:
This is the CSS that can perform that effect:
.myClass:before {
display: inline-block;
width: 32px;
height: 32px;
content: "";
background-image: url("img.gif");
}
You can see this in action on this jsFiddle page.
In this particular case, you can use a pseudo-class (eg ::before), background-image, display:block and a fixed width and height to show the image.
Also, make sure that the colon : is added between content and its value.
A relatively new concept at the horizon is the element() value for backgrounds. This will display HTML as if it were an image: See also -moz-element.
This can be done. For example with Firefox
css
#hlinks
{
-moz-binding: url(stackexchange.xml#hlinks);
}
stackexchange.xml
<bindings xmlns="http://www.mozilla.org/xbl"
xmlns:html="http://www.w3.org/1999/xhtml">
<binding id="hlinks">
<content>
<children/>
<html:a href="/privileges">privileges</html:a>
<html:span class="lsep"> | </html:span>
<html:a href="/users/logout">log out</html:a>
</content>
</binding>
</bindings>
ref 1
ref 2
You can't. It's not what it's for. The CSS is for the presentation layer while the HTML is the data layer.
Actually, you can, but just for characters, not HTML. You can use the content property. With some CSS selectors like :before, you can do nice stuff like adding your own character as a bullet for your list. But not much more.
I'm reworking a site but only have permission to change the CSS. Most of the elements I need to change are properly tagged as id's or classes, but a few places have ids or classes listed inside an img tag.
I want to replace that image in the img tag using only css. Is there a way to do this? ie, hide the src img and have only my css referenced image visible?
sorry for such a late post, (almost a year, i know..), but i had the same exact problem Dreamling,
Some of the html used on our site is called up externally, so editing the html was not an option for me either. Here's how i solved the problem... Using only CSS.
Use Firebug if you have it.
Now look for the image you'd like to replace in the HTML. (firebug will show the id's and classes of the elements)
Your HTML should look something like this for it to work. (with an img src element inside a span element)
<span class="Dreamlings_ClassA Dreamlings_ClassB">
<img src="http://www.dreamlingsSite.com/dreamlingspic.png" alt="Dreamling's Pic">
<span>[This is just an extra span!] </span>
</span>
Now for the CSS :)
Call up the first element by class in the css. (use the last class name to be more specific in with editing [if you have multiple span elements with same first class name])
<span class="Dreamlings_ClassB">
should look something like this..
span.Dreamlings_ClassB {
background-image: url('../dreamlingsnewpic.png') !important;
}
and to hide that pesky image in the img src element..
span.Dreamlings_ClassA img {
display: none !important;
}
And thats it! :)
p.s. I was using the !important tags in my css to overwrite other external stylesheets..
but you don't have to use the tags if yours css will work without them. (you just have to be more specific in the css with id's and classes)
Hope this helped!
-tony
If your image tag is inside a container, anything that's a block, then use this:
<style>
#container {
background: url('image.png') no-repeat;
text-indent: -9999;
}
</style>
<div id="container">
<img src="image.png" alt="image to be replaced" />
</div>
As others said, it's really not good practice, but it works. Only tested in Chrome.
I want to replace that image in the img tag using only css.
Not that I know of, no. An image's src attribute can't be altered from CSS.
I also can't think of a workaround to do this, not even a terribly kludgy one. You can of course assign a background-image to the image element, but the actual image will always be in front of it,
You would have to have the original HTML altered in a way so the original button is a <button> element with a background-image property - that you can override using CSS.
Restricting access to the HTML but allowing access to edit CSS is odd practice. Both elements go hand in hand to produce the page.
Anyway, you could try removing or changing the name of "btn_next.png" so that it doesnt display when called from "src" and make the CSS the following:
#btn_next {
background: url('image.png') no-repeat;
display:block;
width:150px; /* for example */
height:30px; /* for example */
}
If that doesnt work, the only other way would be to hide the input button and replace the li row with a background image but then the button will cease to work. Unless you have access to an already included javascript file, then you can look at other solutions.