bamme
Senior Member
hi everyone
i wondered if there were any css/jquery gurus about (or even just those who know a little more than the basic knowledge i have..!) to see what they think of this prob I'm having with z-index, ie7 and a button which becomes unclickable.
I said I'd try my hand at doing a couple of little bits on this mockup page for a colleague for learning purposes, it'd be cool to know what you'd do in this situ so i can learn..
Regulatory Resources Group | RRG (this is the version with no conditional ie stylesheet so you all can see the problem in ie7)
The 1st issue i noticed was with the jquery fade in/out black container holding white text, over the banner - the dropdown submenu, under navigation menu link "People", was appearing behind the fade in/out text box.
For now I've fixed it by applying z-index attributes to the dropdown and it's parent elements (a bit messily perhaps.. feel free to have a look).
This however does not work in ie7.
To get around this I first tried adding "z-index:-1" to the black fade in/out container (#headertxt), which fixed the black box appearing over the dropdown fine, including on ie7.
However this caused another problem - the purple "Read More" buttons within the fade in/out section stopped working - they became 'unclickable'. I figured this must be because I'd just added "z-index:-1" to it's containing div, #headertxt.
I've kept this file here, which uses an ie7 conditional stylesheet to add that z-index:-1 rule, so you can see the read more button being unclickable:
Regulatory Resources Group | RRG
So i tried to then apply a different z-index to the read more button only, to no avail. I then tried wrapping it in a container with a z-index like this:
Didn't work :/
So a standard ie7 fix I'd use won't work because of this read more button problem.
Can anyone help?
If anyone wants to have a proper look at everything please see
http://www.ameliealden.com/adamsproject/Archive.zip
(excuse the bloated css for the dropdown, sorry, i am a beginner.)
i wondered if there were any css/jquery gurus about (or even just those who know a little more than the basic knowledge i have..!) to see what they think of this prob I'm having with z-index, ie7 and a button which becomes unclickable.
I said I'd try my hand at doing a couple of little bits on this mockup page for a colleague for learning purposes, it'd be cool to know what you'd do in this situ so i can learn..
Regulatory Resources Group | RRG (this is the version with no conditional ie stylesheet so you all can see the problem in ie7)
The 1st issue i noticed was with the jquery fade in/out black container holding white text, over the banner - the dropdown submenu, under navigation menu link "People", was appearing behind the fade in/out text box.
For now I've fixed it by applying z-index attributes to the dropdown and it's parent elements (a bit messily perhaps.. feel free to have a look).
This however does not work in ie7.
To get around this I first tried adding "z-index:-1" to the black fade in/out container (#headertxt), which fixed the black box appearing over the dropdown fine, including on ie7.
However this caused another problem - the purple "Read More" buttons within the fade in/out section stopped working - they became 'unclickable'. I figured this must be because I'd just added "z-index:-1" to it's containing div, #headertxt.
I've kept this file here, which uses an ie7 conditional stylesheet to add that z-index:-1 rule, so you can see the read more button being unclickable:
Regulatory Resources Group | RRG
So i tried to then apply a different z-index to the read more button only, to no avail. I then tried wrapping it in a container with a z-index like this:
HTML:
<div style="z-index:10000000"><a class="readMore" href="<? echo $dir; ?>#" title="Read More">Read More</a></div>
Didn't work :/
So a standard ie7 fix I'd use won't work because of this read more button problem.
Can anyone help?
If anyone wants to have a proper look at everything please see
http://www.ameliealden.com/adamsproject/Archive.zip
(excuse the bloated css for the dropdown, sorry, i am a beginner.)