Results 1 to 7 of 7

Thread: IE has not delivered link Image

  1. #1
    Join Date
    Aug 2011
    Location
    Rep Of Ireland
    Posts
    126
    Thanks
    24
    Thanked 3 Times in 1 Post

    Arrow IE has not delivered link Image

    Chrome, Firefox and Safari delivers City of Culture image in sidebar here

    IE does not deliver the image and that makes me

    What workround do I have to make to get IE to do the business and make me again?

    Thanks in advance for your assistance.

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,377
    Thanks
    77
    Thanked 3,421 Times in 3,382 Posts
    Blog Entries
    12

    Default

    From the page's source code (indents removed):

    Code:
    <div id="sideBar">
    <center>
    <a href="http://www.cityofculture2013.com/Our-2013-Bid/Home.aspx" target="blank">
    <img style ="border:0;" src="cityofculture.jpg" alt="City of Culture Image" width="px"/></a>
    
    <!-- NEWS REEL-->                                      
    <div id="NewsDiv">
    <table cellpad . . .
    Get rid of the highlighted.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Aug 2011
    Location
    Rep Of Ireland
    Posts
    126
    Thanks
    24
    Thanked 3 Times in 1 Post

    Default

    Thanks John, That made the correction in IE.

    I am now seeking to upgrade the image link with a rollover effect. I have similar code working on another site so I just thought that it would easily transfer to this one. But the image will not present at all. Once I can it to present I can then refine positioning.

    The code that I am using is as follows on html page:

    HTML Code:
    <div id="city">
                                     <a href="http://www.cityofculture2013.com/Our-2013-Bid/Home.aspx" class="link">City of Culture Image</a>
    </div>
    and like so on the style sheet

    HTML Code:
    #city  {border: solid 1px red; font-size: 0px; width: 235px; height: 75px;}
    #city a{background:url(city.jpg); display: block; width: 235px;height: 75px;}
    #city a.link:{background-position:0px 0px;}
    #city a.link:hover {background-position:left 0px;}
    Am I making a pigs ear out of the url(city.jpg); thing?

    Thanks for your patients.

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,377
    Thanks
    77
    Thanked 3,421 Times in 3,382 Posts
    Blog Entries
    12

    Default

    Well, tuirtre.webitry.net/city.jpg is a 404 Not Found. That could have something to do with it. And the highlighted line has a syntax error (red):

    Code:
    #city  {border: solid 1px red; font-size: 0px; width: 235px; height: 75px;}
    #city a{background:url(city.jpg); display: block; width: 235px;height: 75px;}
    #city a.link:{background-position:0px 0px;}
    #city a.link:hover {background-position:left 0px;}
    Get rid of the red part. And some browsers require a space here:

    Code:
    #city a{background: url(city.jpg); di . . .
    Take care of those three things and see.

    The browser cache may need to be cleared and/or the page refreshed to see changes.

    If you want more help:

    Please post a link to a page on your site that contains the problematic code so we can check it out.


    Notes:

    The syntax error with the colon should only invalidate that line, and I believe 0, 0 is the default background position. If so, in many cases that error is a wash - does no harm. The added space I'm suggesting is probably only for IE less than 9, maybe even earlier. The most important thing is the missing image. There could also be other problems, like conflicting styles and/or conflicting surrounding HTML code, at least in some browsers.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  5. #5
    Join Date
    Aug 2011
    Location
    Rep Of Ireland
    Posts
    126
    Thanks
    24
    Thanked 3 Times in 1 Post

    Default

    Still foxed by this. I must be missing something simple! Link is at this place.

  6. #6
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,377
    Thanks
    77
    Thanked 3,421 Times in 3,382 Posts
    Blog Entries
    12

    Default

    In the css/myStyle.css file it has:

    Code:
    /*City of Culture Rollover*/
    #city {border: solid 1px red; font-size: 0px; width: 235px; height: 75px;}
    #city a {background: url(derry.jpg); display: block; width: 235px;height: 75px;}
    #city a.link {background-position: 0px 0px;}
    #city a.link:hover {background-position: right 0px;}
    /* End of Rollover Control */
    Paths in css files are relative to the css file. Since the image is in the parent (also in this case, the root) folder, this should be:

    Code:
    #city a {background: url(../derry.jpg); display: block; width: 235px;height: 75px;}
    or:

    Code:
    #city a {background: url(http://www.tuirtre.webitry.net/derry.jpg); display: block; width: 235px;height: 75px;}
    or:

    Code:
    #city a {background: url(/derry.jpg); display: block; width: 235px;height: 75px;}
    And this line:

    Code:
    #city a.link:hover {background-position: right 0px;}
    makes no noticeable change, it should be:

    Code:
    #city a.link:hover {background-position: 0 75px;}
    or:

    Code:
    #city a.link:hover {background-position: 0 bottom;}
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  7. The Following User Says Thank You to jscheuer1 For This Useful Post:

    Webiter (10-21-2011)

  8. #7
    Join Date
    Aug 2011
    Location
    Rep Of Ireland
    Posts
    126
    Thanks
    24
    Thanked 3 Times in 1 Post

    Default

    Thanks John,

    Sorted. I must be mixing up img src and url in different situations. Can't beat experience.

Tags for this Thread

Bookmarks

Posting Permissions

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