Image not showing as link

[SRD]

On the following page:
http://www.mereamdram.co.uk/frontstage1.html
The following snippet of 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

[BJ Duncan]

Have you tried to place the anchor inside the nested tags?

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

[SRD]

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.

[BJ Duncan]

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.

.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]
}

<div class="bground">
        <a href="#"></a>
</div>

Let me know how you go.

[SRD]

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

[BJ Duncan]

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

[SRD]

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.

[SRD]

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.

[BJ Duncan]

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.

[SRD]

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.

[SRD]

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.

[tictike]

Are you using cursor: pointer; in your css? IE understands cursor: hand;. Use both in your css.

[tictike]

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.

[SRD]

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.

[SRD]

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.

[tictike]

Did it work?

[BJ Duncan]

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

[SRD]

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.