...

View Full Version : GIF not appearing



SteveH
06-20-2010, 04:21 PM
Hello

I am using the following in a Web page to show two small gif files:


<h3 class="check">check</h3>
<div id="check">


<h3 class=track">track</h3>
<div id="track">

The CSS looks like this:


h3.check {
background: url(../img/check.gif) no-repeat scroll left top transparent;
height: 30px;
text-indent: -9999px;
margin-top:20px;
}

h3.track {
background: url(../img/track.gif) no-repeat scroll left top transparent;
height: 30px;
text-indent: -9999px;
}



the site is here: www.proofreading4students.com (http://www.proofreading4students.com)(Service tab)

As you can see the image 'track' appears (please disregard the image quality - I can correct that later), but the check.gif does not appear.

Why is that, please?

Thanks.

Steve

abduraooft
06-20-2010, 05:53 PM
Make use of absolute paths with a trailing slash and forget all relative path dependencies.

h3.check {
background:url("/img/check.gif") no-repeat scroll left top transparent;
height:30px;
margin-top:20px;
text-indent:-9999px;
}

See http://www.codingforums.com/showthread.php?p=784167#post784167 to get more.

SteveH
06-20-2010, 06:33 PM
Hello abduraooft

Thanks for your reply.

I have tried that:


h3.check {
background: url("/img/check.gif) no-repeat scroll left top transparent;
height: 30px;
text-indent: -9999px;
margin-top:20px;
}

h3.track {
background: url("/img/track.gif) no-repeat scroll left top transparent;
height: 30px;
text-indent: -9999px;
}


...but the result is still the same.

Cheers

Steve

_Aerospace_Eng_
06-20-2010, 07:03 PM
Remove the " (quote). FYI abdura had two quotes in there, you only put one. If you wanted to use a relative path you would need do this

h3.check {
background: url(../../img/check.gif) no-repeat scroll left top transparent;
height: 30px;
text-indent: -9999px;
margin-top:20px;
}
Also your html needs to be valid for the css to work properly. You have <h3 class=track">. You are missing a quote again. On that page alone you have 23 errors.

http://validator.w3.org/check?uri=http%3A%2F%2Fwww.proofreading4students.com%2Fwork.asp&charset=%28detect+automatically%29&doctype=Inline&group=0

Another thing do not use XHTML1.1 if you don't know how to pass the right headers. Stick to XHTML 1.0

SteveH
06-21-2010, 11:28 AM
That seems to have done it, Aerospace.

I'll tak a look at the Validator - to be honest, when I have followed it before it has just put the pages out (changed the layout, etc).

Many thanks again.

Steve



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum