1

I have a theme image which I am getting from an infopath and proccessing through xslt. I am using this image as a theme for header of my site. Here is my current structure

<div id="mainContent"> <a href="http://xyz.com">testlink</a></div>
<div id="theme"><a href="http://aaa.com"><img src="abc.jpg" /></a></div>

I am placing my theme behind my header bar by position:absolute and z-index:-1

Now my issue is, I have to make this theme image clickable. However if I have a link on mainContent div, that should also work. Also I can't use image as background as I have to make image path configurable (through infopath) and can't hardcode it in css.

In IE browser, above structure worked fine as IE allow us to access lower z index div, and I can click it. however other browser are not. I require a universal solution which should work in IE 7+ and latest version of Firefox, Chrome and safari

Note: I am new in posting question on the forum, so please let me know in case anything is not clear in my question

gaurav handa
  • 29
  • 6

1 Answers1

0

If you can change your html, a solution is to put the theme div first, and put both divs in position:absolute. You don't need z-index then.

A simple example can be found here: jsFiddle example.

The css code being :

#theme {
    position: absolute;
    top:0;
    left:0;
}
#mainContent {
    position: absolute;
    top:0;
    left: 0;
}

Other method inspired by This answer : Set the theme image as part of the mainContent div, with position absolute and z-index set, and everything else with position relative and a larger z-index. See this example.

Community
  • 1
  • 1
TonioElGringo
  • 1,007
  • 1
  • 10
  • 17
  • Your fiddle is working fine however I have to make my header as fixed height and width(to match my UI). If I am making same height and width for both div, then I am only getting content div and theme div is hiding behind. Hence not clickable (in all browsers) see fiddle http://jsfiddle.net/Yzhzj/2/ – gaurav handa Nov 16 '12 at 11:59