Links Don't Work with Absolute Positioned Background Image

oops forgot the HTML code

<img src="images/vines.png" width="972" height="448" alt="Vines Watermark" />

I'm just gonna go ahead and assume theres a huge amount of html code left out here. We'd need to see everything. Ideally a live link.

Most likely something with z-index.
Please provide a link.

Sorry guys...I wasn't sure if live links were allowed...on some forums they are not. The site is at www.drkdesign.com/ks/specials.php (That's the page with the link problem.)

I saw something on another forum where it was suggested the z-index be removed and it worked for them. So I did that but its not working for me.

Don't remove it add it!

Give prominence in the stacking order to the links elements which I presume is the element named #vines which already has position relative initiated so add a z-index that will pull the element above the absolute positioned one.

Okay so I've been googling an answer on this for hours today and finally happened upon this fix...I have no idea why it works but it does. I just added a {position:relative;} to the code.

#container {
	margin: 0 auto;
 	background: transparent url(../images/middle.jpg) repeat-y;
	width: 980px;
}
 
#vines {
	position: relative;
}
 
 
#vines img {
	position: absolute;
	top: 0;
	left: 10px;
}
 
a { 
	position: relative;
}

Go read up on the stacking context of elements at the W3C then you will have an idea why, rather than simply wondering for ever more

Hugo, I saw your response only after I added mine, so I tried your fix, but no go...am sticking with the a { position: relative; } code. Thanks though!

Hugo, I saw your response only after I added mine, so I tried your fix, but no go...am sticking with the a { position: relative; } code. Thanks though!

oops sorry about the double post...am not sure why that happened.

Thanks Hugo...I understand the stacking principle but never would have thought of stacking a link.

No what I suggested doesn't work but I was having to guess slightly based on insufficient detail from the initial post

I have just looked at your site and you are creating your own problems by disrupting the natural flow of elements for no real reason you must make a few fundamental changes to your layout.

Firstly and most importantly you should not be setting decorative images as inline foreground ones, site decoration is placed as background to elements.

#vines should in reality be a parent element to your #content and #sidebar - rename it and set your background to it, you now have preserved the natural flow and are not disrupting the natural stacking order and the issue of the links doesn't arise. The heading strip thing do in a similar manner set a graphic as a background.

I spotted that you have used #vines twice (although one was empty) - an ID must only be used once per page.

Thank you Hugo...I don't know why I didn't think of doing it this way...it makes perfect sense. I have set up a #wrapper2 for the content and sidebar using vines.jpg as a background image.

I didn't do this with the page headers though because I didn't want the text falling out of the header strips when text is enlarged in the browser..so I made those strictly images.

And I guess you must have posted before I found the double id for #vines.

Thanks for all your help!