SitePoint Sponsor

User Tag List

Results 1 to 18 of 18
  1. #1
    SitePoint Zealot
    Join Date
    Sep 2007
    Location
    Wiltshire, UK.
    Posts
    106
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Image not showing as link

    On the following page:
    http://www.mereamdram.co.uk/frontstage1.html
    The following snippet of code
    Code:
    <a href="background.html" title="Link to background information">
      <div>
          <span class="bground">
          <img src="images/background3.jpg" alt="Background" />  	
          <br />Click for access to M.A.D.S. 
          <br />origins and background.
          </span>
       </div>
    </a>
    works Ok in FF but the image fails to act as a link in IE7 although the surrounding div does and the cursor fails to show the icon suggesting the link is there. I tried putting the image as a link to background.html as well but then it fails to show at all on hover.

    Can anyone suggest a solution, or at least how IE7 is parsing the code to prevent the image acting as a link?

    Thanks
    Last edited by SRD; May 26, 2008 at 02:00.

  2. #2
    SitePoint Evangelist BJ Duncan's Avatar
    Join Date
    Jun 2007
    Location
    North Richmond
    Posts
    495
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Have you tried to place the anchor inside the nested tags?
    Code:
    <div>
          <span class="bground">
              <a href="background.html" title="Link to background information">
              <img src="images/background3.jpg" alt="Background" />  	
              <br />Click for access to M.A.D.S. 
              <br />origins and background.
              </a>
          </span>
       </div>
    Regards,
    BJ Duncan

  3. #3
    SitePoint Zealot
    Join Date
    Sep 2007
    Location
    Wiltshire, UK.
    Posts
    106
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks BJ, but that doesn't bring up the image at all on hover and no link either, the same is true for both IE7 and FF.

  4. #4
    SitePoint Evangelist BJ Duncan's Avatar
    Join Date
    Jun 2007
    Location
    North Richmond
    Posts
    495
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey SRD,

    I have just tested this code on one of my test sites and it works in IE7. I think it will just be a case of implementing it within your site.

    Code CSS:
    .bground a {
       padding: 5px;
       width: 300px;
       height: 200px;
       background-color: #000;
       display: block;
    }
     
    .bground a:hover {
       background-image: url([url]http://www.mereamdram.co.uk/images/background3.jpg);[/url]
    }

    Code HTML4Strict:
    <div class="bground">
            <a href="#"></a>
    </div>

    Let me know how you go.
    Regards,
    BJ Duncan

  5. #5
    SitePoint Zealot
    Join Date
    Sep 2007
    Location
    Wiltshire, UK.
    Posts
    106
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I suspect I'm not following your suggestions properly
    http://www.mereamdram.co.uk/frontstage1.html

    I've just realised your HTML code is 4strict whereas I'm using XHTML 1 strict but I don't think that would make the difference.

    I've edited the URL to allow the original page (frontstage.html) to be re-instated
    Last edited by SRD; May 22, 2008 at 07:36.

  6. #6
    SitePoint Evangelist BJ Duncan's Avatar
    Join Date
    Jun 2007
    Location
    North Richmond
    Posts
    495
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by SRD View Post
    I've just realised your HTML code is 4strict whereas I'm using XHTML 1 strict but I don't think that would make the difference.
    No this should have no bearing on the outcome.

    Have a look at my testing site, it may assist within your coding. Let me know if you want the code to it.
    Click here for the testing site
    Regards,
    BJ Duncan

  7. #7
    SitePoint Zealot
    Join Date
    Sep 2007
    Location
    Wiltshire, UK.
    Posts
    106
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks BJ Duncan, I've found the error, I'd copied your code exactly from the post above and hadn't noticed that the style for .background a: hover had an extraneous [/url] on the end of it. A study of your testing site sorted it for me. Thanks again. It still needs a little tweaking but you've put me back on the right path.

  8. #8
    SitePoint Zealot
    Join Date
    Sep 2007
    Location
    Wiltshire, UK.
    Posts
    106
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ah, not as easy as I thought, this now makes the image the object of the hover, what I want is the whole centrecontent div to be the object of the hover so that when the cursor is passed anywhere between 'the wings' and above the 'stage back line' the image, and message, appears.

  9. #9
    SitePoint Evangelist BJ Duncan's Avatar
    Join Date
    Jun 2007
    Location
    North Richmond
    Posts
    495
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You can set that within the width and height fields from the a:hover
    Then just place the image within. I am about to head off to work, but I will log on later and try and pass some code to you.
    Regards,
    BJ Duncan

  10. #10
    SitePoint Zealot
    Join Date
    Sep 2007
    Location
    Wiltshire, UK.
    Posts
    106
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Won't that fix the width of the page though? Forcing a minimum width of curtains plus wings plus background image. I was hoping to allow the page width to shrink to little more than curtains and wings.

  11. #11
    SitePoint Zealot
    Join Date
    Sep 2007
    Location
    Wiltshire, UK.
    Posts
    106
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    For anyone trying to follow this I'm making the adjustments mentioned on page http://mereamdram.co.uk/frontpage1.html .
    The original page, which works well using FireFox can be found at http://mereamdram.co.uk/frontstage.html .

    On a more 'philosophical' point, I wonder why IE doesn't show the 'hand' indicating the presence of a link anywhere within the centrecontent div nor the footer div on the page http://mereamdram.co.uk/frontstage.html although clicking on the areas that do work as a link (those not containing an image) within those divs, shows a hand for a brief moment before the link is followed.

  12. #12
    SitePoint Guru tictike's Avatar
    Join Date
    Apr 2008
    Location
    Canada
    Posts
    863
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Are you using cursor: pointer; in your css? IE understands cursor: hand;. Use both in your css.

  13. #13
    SitePoint Guru tictike's Avatar
    Join Date
    Apr 2008
    Location
    Canada
    Posts
    863
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    do you have different z-index settings in your css for this page?

    better yet, i just noticed your a tag is surrounding a div, but a tags can only contain inline elements.
    Last edited by tictike; May 26, 2008 at 12:19. Reason: adding more info

  14. #14
    SitePoint Zealot
    Join Date
    Sep 2007
    Location
    Wiltshire, UK.
    Posts
    106
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by tictike View Post
    Are you using cursor: pointer; in your css? IE understands cursor: hand;. Use both in your css.
    Thanks, I spent some time a while back trying out custom cursors in an effort to improve mystery meat navigation on another site and had already discovered that, but I was wondering why IE wasn't identifying the area as being a link except in the brief moment of clicking on it.

  15. #15
    SitePoint Zealot
    Join Date
    Sep 2007
    Location
    Wiltshire, UK.
    Posts
    106
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by tictike View Post
    do you have different z-index settings in your css for this page?

    better yet, i just noticed your a tag is surrounding a div, but a tags can only contain inline elements.
    Ah, that may well help. Odd that FF, which is normally hotter on these things, is accepting it though.

  16. #16
    SitePoint Guru tictike's Avatar
    Join Date
    Apr 2008
    Location
    Canada
    Posts
    863
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Did it work?

  17. #17
    SitePoint Evangelist BJ Duncan's Avatar
    Join Date
    Jun 2007
    Location
    North Richmond
    Posts
    495
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by SRD View Post
    Won't that fix the width of the page though? Forcing a minimum width of curtains plus wings plus background image. I was hoping to allow the page width to shrink to little more than curtains and wings.
    You could change the image so the illusion is that it is only half the size of the area you need.
    Again, check example site.
    That would be my 'quick fix' solution. W3C standards may contest
    Regards,
    BJ Duncan

  18. #18
    SitePoint Zealot
    Join Date
    Sep 2007
    Location
    Wiltshire, UK.
    Posts
    106
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry folks, my builders have turned up and I'm up to my ears in rubble, I'll get back as soon as I have time.


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
  •