Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 4 of 4
  1. #1
    Senior Member bamme's Avatar
    Join Date
    Aug 2009
    Posts
    319
    Member #
    19662
    Liked
    1 times
    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:



    HTML Code:
    [COLOR=rgb(0, 0, 128)]<div style=[COLOR=rgb(0, 0, 255)]"z-index:10000000"[/COLOR]>[/COLOR][COLOR=rgb(0, 128, 0)]<a class=[COLOR=rgb(0, 0, 255)]"readMore"[/COLOR] href=[COLOR=rgb(0, 0, 255)]"<? echo $dir; ?>#"[/COLOR] title=[COLOR=rgb(0, 0, 255)]"Read More"[/COLOR]>[/COLOR]Read More[COLOR=rgb(0, 128, 0)]</a>[/COLOR][COLOR=rgb(0, 0, 128)]</div>[/COLOR]
    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.)

  2.  

  3. #2
    Unpaid WDF Intern TheGAME1264's Avatar
    Join Date
    Dec 2002
    Location
    Not from USA
    Posts
    14,483
    Member #
    425
    Liked
    2783 times
    You had the right idea with the z-index. You just put it in the wrong place.

    Add z-index: 1 to the #nav-container ul#nav li ul CSS. You probably won't even need an IE7 hack if you do that.
    If I've helped you out in any way, please pay it forward. My wife and I are walking for Autism Speaks. Please donate, and thanks.

    If someone helped you out, be sure to "Like" their post and/or help them in kind. The "Like" link is on the bottom right of each post, beside the "Share" link.

    My stuff (well, some of it): My bowling alley site | Canadian Postal Code Info (beta)

  4. #3
    Senior Member bamme's Avatar
    Join Date
    Aug 2009
    Posts
    319
    Member #
    19662
    Liked
    1 times
    unfortunately this doesn't work in ie7. im not sure if you're also instructing me to remove some of the z-index rules from elsewhere in the css, but the grey fade in/out box covers the dropdowns if i add "z-index:1" to #nav-container ul#nav li ul.

    I also tried removing z-index:5000 from #headertxt to see if that made a difference,and there was none.

    so, im left with either of the same 2 issues: either the read more button contained within #headertxt is unclickable (due to giving z-index:-1 rule to #headertxt), or my dropdowns are covered by the #headertxt div. I try to apply a greater z-index than both the dropdown and it's parent element #headertxt to the readmore button alone (#headertxt a.readMore), but this doesn't work either

    :S

  5. #4
    Unpaid WDF Intern TheGAME1264's Avatar
    Join Date
    Dec 2002
    Location
    Not from USA
    Posts
    14,483
    Member #
    425
    Liked
    2783 times
    Yeah, I did, actually. Remove the z-index: -1 from the button div itself. Just keep +1 on the ul menus as I suggested above.
    If I've helped you out in any way, please pay it forward. My wife and I are walking for Autism Speaks. Please donate, and thanks.

    If someone helped you out, be sure to "Like" their post and/or help them in kind. The "Like" link is on the bottom right of each post, beside the "Share" link.

    My stuff (well, some of it): My bowling alley site | Canadian Postal Code Info (beta)


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 02:13 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com