Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    Regular Coder
    Join Date
    Nov 2005
    Posts
    750
    Thanks
    138
    Thanked 1 Time in 1 Post

    GIF not appearing

    Hello

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

    Code:
    <h3 class="check">check</h3>
    <div id="check">
    Code:
    <h3 class=track">track</h3>
    <div id="track">
    The CSS looks like this:

    Code:
    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 (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

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,854
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Make use of absolute paths with a trailing slash and forget all relative path dependencies.
    Code:
    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/showthre...167#post784167 to get more.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    Regular Coder
    Join Date
    Nov 2005
    Posts
    750
    Thanks
    138
    Thanked 1 Time in 1 Post
    Hello abduraooft

    Thanks for your reply.

    I have tried that:

    Code:
    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

  • #4
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    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
    Code:
    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=ht...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
    Last edited by _Aerospace_Eng_; 06-20-2010 at 06:08 PM.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • Users who have thanked _Aerospace_Eng_ for this post:

    SteveH (06-21-2010)

  • #5
    Regular Coder
    Join Date
    Nov 2005
    Posts
    750
    Thanks
    138
    Thanked 1 Time in 1 Post
    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


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •