I have a old css line taking precedence over my new <img> ID CSS how can I over-ride this?
I'm looking to change the width of an image within greybar, and cannot change the image width with a new ID.
Here's my code:
#greybar img {
width: 75px;
float: left;
margin: 10px;
}
#rpmimage {
width: 125px;
}
You need to look up CSS Specificity. In short, different selectors get a different score.
An ID is worth 100, a Class is worth 10, and a tag selector is worth 1.
That means that #greybar img is worth 101, whereas #rpmimage is worth 100. Hence, the first one 'wins'.
Many people recommend not using IDs for CSS, and not to over-qualify selectors where needed to help.
In you case, try #rpmimage img instead, or rethink what you are doing with this new knowledge!
There are a variety of 'bad things' to do, including using inline styles (like you'll remember you did that next time you have a problem!), or using !important. Thing with !important is that it takes priority over everything which means next time you have this issue you have nowhere to go.
http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/ is a great article that has some good practice in it, and is worth reading for everyone really!
For a nice tool to help understand more complex selectors, try http://specificity.keegan.st/ - this lets you test things like #id:after p > img to see what specificity they have.
I think you should be able to do an in-line style, at least as a quick and dirty trick.
For example:
<img style="width:75px;" ... >
width: 75px !important;on #greybar img