Solved

CSS issue

Posted on 2013-01-26
10
187 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
10 Comments
 
LVL 83

Expert Comment

by:Dave Baldwin
ID: 38822404
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
ID: 38822422
sorry my bad
0
 
LVL 15

Author Comment

by:gplana
ID: 38822431
yes, but why ?
0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 12

Expert Comment

by:mwochnick
ID: 38822438
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
ID: 38822505
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
 
LVL 12

Expert Comment

by:mwochnick
ID: 38822739
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
ID: 38823078
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
ID: 38823293
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
ID: 38823640
Excellent. It works !

Thank you very much.
0
 
LVL 7

Expert Comment

by:Alicia St Rose
ID: 38825028
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

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Change Firefox bookmarks menu font size 2 74
How do I select this logo using CSS? 6 53
modify font on ninja form 1 27
ninja forms fields lay next to each other 1 23
Unordered lists (HTML ul tags) are very handy to create menus of all types, shapes and sizes.  All it takes is a little knowledge of CSS and the possibilities are endless. First off, you should know the general format for menus created using the …
Creating a CSS block that only applies to printing By default, all of your CSS applies to every possible view of your page - whether on screen, printed, landscape, touch-screen, or whatever.  You can, however, add CSS that only applies under certai…
In this Micro Tutorial users will learn how to embed custom fonts into websites using @font-face in CSS Select a font: Ensure the EULA allows you to use @font-face: Download the font: Get the browser-compatible files you need: Edit your CSS       - Name …
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.…

710 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