Works in my browser but not when I upload to server

[kralcx]

I'm hoping someone can help me with this; I'm hoping it is something simple that I am overlooking.

 

My design looks perfect when tested in my browser (IE,FF, Opera, Chrome, Safari), however when I upload it to my server I loose my button image. The hotspot is still there but the button image is gone. (By the way it is a CSS rollover button). The button should be red with white text located below the picture of the woman under the text "Get Herbal Fiberblend Now"

 

Here is a snippet of the CSS:

 

#button {

margin-left: 118px;

margin-top: 9px;

display: block;

float: left;

height: 31px;

margin-bottom: 0;

width: 208px;

background: url(images/button.gif) no-repeat 0 0;

}

 

#button:hover

{

background-position: 0 -31px;

}

 

and a snippet of the html code:

 

<a href="http://www.theaimcompanies.com/products/herbal_fiberblend/powder_and_capsules.aspx?prodcode=3217E&lid=168&AIM_AXOwnerID=628037&aimstore=y" id="button" title="Try Herbal Fiberblend Today!" alt="Try Herbal Fiberblend Today!"<span></span></a>

<div class="clearFloat"></div>

 

the webpage is: ww w.hiy gin.com/herbalfiberblend/herbalfiberblend.html

 

I checked the code and the images; I uploaded it to my server the same files that I tested on my home computer. Any help is greatly appreciated. If you need any more information just let me know. Thanks in advance.

Edited July 12, 2011 by kralcx

[falkencreative]

Either you didn't upload the image or you uploaded it to an incorrect location. This is where it's looking for the image, and you'll see you get a "file doesn't exist" message: http://www.hiygin.com/herbalfiberblend/images/button.gif

[kralcx]

I just did something stupid somehow my computer crashed and I lost my css file. I spent so much time on this its going to take me a while to put it back together

[Archadian28]

unless your images folder is in the same folder as your css script you need to change this:

 

background: url(images/button.gif) no-repeat 0 0;

 

To this:

 

background: url(../images/button.gif) no-repeat 0 0;

 

../ goes back 1 directory. So if you are in the css folder use ../ to go back to the root folder then go into images. Or it could be what Ben said.

 

As far as losing your css file...at least you have this:

 

#button {
margin-left: 118px;
margin-top: 9px;
display: block;
float: left;
height: 31px;
margin-bottom: 0;
width: 208px;
background: url(images/button.gif) no-repeat 0 0;
}

#button:hover
{
background-position: 0 -31px;
}

 

lol.

Edited July 13, 2011 by Archadian

[kralcx]

Okay I got my CSS code back up ....(I got to remember backup, backup, backup, backup)

 

anyhow I figured out what the problem was...

 

my original code was: background: url(images/button.gif) no-repeat 0 0;

 

the correct working code is: background: url(images/Button.gif) no-repeat 0 0;

 

Thanks Ben for pointing me in the right direction!

 

I didn't realize capitalization was so important! Is this some sort of rule I just didn't know about, or was my issue some kind of fluke?

 

Any comments much appreciated?

[falkencreative]

I didn't realize capitalization was so important! Is this some sort of rule I just didn't know about, or was my issue some kind of fluke?

Capitalization does matter, and will matter in future things you do. As a general rule, I try to keep everything lowercase.

[kralcx]

Thanks for the heads up Ben...much appreciated.

 

Turns out many servers are case sensitive which is why it looked fine in my browser but not when I uploaded it to my server.

Edited July 13, 2011 by kralcx