CSS issue

Hi.

I have a CSS issue on this site: http://trasterosolidario.org

There are some boxes on the right. The first two boxes are titled "NUEVO PRODUCTO" and have a link (called "OFREZCO" and "NECESITO"). I would like to convert these links to a button, so I added this code:

<div class="boto_groc">
   <a href=".... my link here .... </a>
</div> 

Open in new window


Then I have added a .boto_groc css rule for adding a background image:

.boto_groc { background:url(../images/boto_groc.jpg) 0px 0px no-repeat important!; width:240; text-align:center; }

Open in new window


I know the css rule is beign applied as link is centered, however, I don't understand why the image doesn't appear. Image file is uploaded as if you go to http://trasterosolidario.org/templates/ts/images/boto_groc.jpg it appears.

Why this image doesn't appear as the background of the links ?
What I'm doing wrong?

Thank you.
LVL 15
gplanaAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Dave BaldwinFixer of ProblemsCommented:
It appears you have http://trasterosolidario.org/templates/ts/images/module-bottom.jpg overwriting it because that's the one that is appearing.
0
mwochnickCommented:
sorry my bad
0
gplanaAuthor Commented:
yes, but why ?
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

mwochnickCommented:
try
.boto_groc { background:url(../images/boto_groc.jpg) 0px 0px no-repeat !important; width:240; text-align:center; }

Open in new window


with the ! before important

and you appear to have a styles that overwrite it at line 567 and 570 of template.css that overwrite your style
0
gplanaAuthor Commented:
I have made the change of !, thanks for tell me this, which I hadn't noticed.

I'm not understanding what you mean:
and you appear to have a styles that overwrite it at line 567 and 570 of template.css that overwrite your style
0
mwochnickCommented:
Sorry had to step away.  So if you look at this image of Chrome when I inspect the element you can see the styles that are applied and overwritten.  Your style is being over written by the background none on 570  - don't know if you can comment that out or not - it may affect other parts of your site.
chrome inspect element
0
gplanaAuthor Commented:
Ok, I understand. But is there a way to make this rule have more priority than the rule that is overwritting the background attribute?

Thanks.
0
mwochnickCommented:
in template.css you have the style as
.boto_groc

Open in new window

try using
#content #right .boto_groc

Open in new window

instead
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
gplanaAuthor Commented:
Excellent. It works !

Thank you very much.
0
Alicia St RoseOwner & Principle Developer/DesignerCommented:
To find out why this worked check this out:

http://www.standardista.com/css3/css-specificity/

It will save you a lot of head banging in the future. Use !important only as a last resort...
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.