[Webinar] Streamline your web hosting managementRegister Today

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 194
  • Last Modified:

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.
0
gplana
Asked:
gplana
1 Solution
 
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
Learn to develop an Android App

Want to increase your earning potential in 2018? Pad your resume with app building experience. Learn how with this hands-on course.

 
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
 
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

Featured Post

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now