Need help styling a button

[celticpride678]

I'm trying to style a button that allows the reader to click it, then be brought to the single post page to continue reading the article. I'm trying to set it up using this tutorial: http://www.oscaralexander.com/tutorials/how-to-make-sexy-buttons-with-css.html. However, it's not working. The link and text shows up, but the actual background image of the button does not work. Any ideas?

http://www.itsalltech.com

 

[angelwatt]

If you're talking about the "Continue Reading" links I don't see any CSS applied to it to try to make it look like a button. Are you sure you uploaded the CSS? You may also have an issue with your CSS selector.

 

[celticpride678]

If you're talking about the "Continue Reading" links I don't see any CSS applied to it to try to make it look like a button. Are you sure you uploaded the CSS? You may also have an issue with your CSS selector.

Sorry, I brought it down because I was working on it. I put the CSS in the Stylesheet. Everything works except for the background of the button. I uploaded the image, but it does not work. Any ideas?

 

[ergdegdeg]

It doesn't find the image. Are you sure you used the right path?

 

[celticpride678]

It doesn't find the image. Are you sure you used the right path?

Yes- I uploaded the image into /wp-content/themes/mystique. That's where the CSS is pointing to as well.

 

[astroot]

All of your other images are in the images directory. It's not finding your gif files for the button.

 

[celticpride678]

All of your other images are in the images directory. It's not finding your gif files for the button.

I moved it into the Images directory and it still does not work. I changed the code to point to the images directory also.

 

[nuxx]

background:transparent url(/wp-content/themes/mystique/imagesbg_button_a.gif) no-repeat scroll right top;

You're missing a forward slash after images. I would also change it to a path relative to your themes directory;

background:transparent url(images/bg_button_a.gif) no-repeat scroll right top;

 

[celticpride678]

background:transparent url(/wp-content/themes/mystique/imagesbg_button_a.gif) no-repeat scroll right top;

You're missing a forward slash after images. I would also change it to a path relative to your themes directory;

background:transparent url(images/bg_button_a.gif) no-repeat scroll right top;

For some reason it's still not working.

 

[nuxx]

Using the full URL, I can directly access other images on your site, for example your youtube button.

But when I try the same with bg_button_a.gif, this is what I get.

Are you certain the image is located where you think it is?

 

[celticpride678]

Using the full URL, I can directly access other images on your site, for example your youtube button.

But when I try the same with bg_button_a.gif, this is what I get.

Are you certain the image is located where you think it is?

That's weird. I can work that out later. I just tried using the YouTube icon that we know we can access and the background still does not work. Seems like an issue with the code, not the image.

 

[angelwatt]

That's weird. I can work that out later. I just tried using the YouTube icon that we know we can access and the background still does not work. Seems like an issue with the code, not the image.

The Youtube image didn't work because you used a relative path instead of an absolute one, you were forgetting the first forward slash. I was able to get the image to show using Firebug after adding that slash. So the code is fine. Are you sure you have the right capitalization and the correct extension on the image?

 

[celticpride678]

The Youtube image didn't work because you used a relative path instead of an absolute one, you were forgetting the first forward slash. I was able to get the image to show using Firebug after adding that slash. So the code is fine. Are you sure you have the right capitalization and the correct extension on the image?

I kinda gave up on that image and just made a quick one in Photoshop. It works fine now. Thanks for all the help.

 

[brisbaneguy29]

With wordpress use this

background:transparent url('images/bg_button_a.gif') no-repeat scroll right top;

If you,look at the other css that comes with wordpress they always put '' around the images in the CSS.