Solved

CSS issue

Posted on 2013-01-26
10
182 Views
Last Modified: 2013-01-27
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
Comment
Question by:gplana
10 Comments
 
LVL 82

Expert Comment

by:Dave Baldwin
Comment Utility
It appears you have http://trasterosolidario.org/templates/ts/images/module-bottom.jpg overwriting it because that's the one that is appearing.
0
 
LVL 12

Expert Comment

by:mwochnick
Comment Utility
sorry my bad
0
 
LVL 15

Author Comment

by:gplana
Comment Utility
yes, but why ?
0
 
LVL 12

Expert Comment

by:mwochnick
Comment Utility
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
 
LVL 15

Author Comment

by:gplana
Comment Utility
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
Do You Know the 4 Main Threat Actor Types?

Do you know the main threat actor types? Most attackers fall into one of four categories, each with their own favored tactics, techniques, and procedures.

 
LVL 12

Expert Comment

by:mwochnick
Comment Utility
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
 
LVL 15

Author Comment

by:gplana
Comment Utility
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
 
LVL 12

Accepted Solution

by:
mwochnick earned 500 total points
Comment Utility
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
 
LVL 15

Author Closing Comment

by:gplana
Comment Utility
Excellent. It works !

Thank you very much.
0
 
LVL 7

Expert Comment

by:Alicia St Rose
Comment Utility
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

Top 6 Sources for Identifying Threat Actor TTPs

Understanding your enemy is essential. These six sources will help you identify the most popular threat actor tactics, techniques, and procedures (TTPs).

Join & Write a Comment

Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
In this Micro Tutorial viewers will learn how to create a CSS image sprite (In a later tutorial, viewers will learn how to use CSS and HTML to create a navigation menu using this sprite) Open a new Photoshop document with a width of (Icon width)x(N…

744 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

10 Experts available now in Live!

Get 1:1 Help Now