Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Feb 2011
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Z-index problems

    Dear all,

    Please could anyone help me some issues I am having. I am having problems with an Z-index issue in IE. Please see the website at the following URL http://www.pollardsprint.co.uk/PROOF...ite/index.html

    On the index.html page there is an Enquiry tab, once clicked, the form goes behind the movie.

    Also on the history.html, the same thing happens, its goes behind the history timeline.

    Also on the history page, the Plant List and Art work contents once clicked also go behind the timeline and the drop down navigation menu.

    Please find the css for the enquiry form, navigation.

    ENQUIRY FORM CSS

    Code:
    #zenbox_overlay { top:0; left:0; width: 100%; height: 100%; position: absolute; _position: absolute; z-index: 2; }
    #zenbox_overlay * { margin: 0; padding: 0; font-family: Arial, Helvetica, sans-serif; font-style:normal; font-variant:normal; font-size: 12px; color:#333;}
    
      #zenbox_main { width: 670px; height: 620px; margin: 0 auto; z-index:2; position:relative; }
        #zenbox_main div { padding: 5px 20px 0 20px; margin:0; background: #EEE; overflow:none; border-right: solid 2px #000; border-left: solid 2px #000; }
    
        #zenbox_main #overlay_header {
          padding: 0.5em 0.5em 4px 0.5em; background-color:#333;
          font-weight: bold; height:18px; border: solid 2px #000;
          border-bottom-width: 0;
        }
          #zenbox_main #overlay_header span {
            float:right; height:20px; padding-right:20px; background: transparent url('/external/zenbox/images/close.png') no-repeat 33px 0;
            text-decoration:underline; font-size:11px; cursor:pointer; color: #fff;
          }
    
        #zenbox_main #overlay_loading, #zenbox_main #zenbox_iframe {
          border: solid 2px #000; border-top-width: 0;
        }
    
        #zenbox_main #overlay_loading {
          font-size: 2em;
          padding: 1em;
          text-align: center;
        }
    
        #zenbox_iframe { width: 100%; height: 100%; z-index:2; }
    
        #zenbox_screen { top:0; left:0; z-index:1; width: 100%; position: absolute; background-color: #000; opacity: 0.42; filter:alpha(opacity=42); -moz-opacity: 0.42;}
    
    #zenbox_tab {
      top: 33%; width: 120px; height: 84px; cursor:pointer; text-indent:-5000px;
      position: fixed; z-index: 10000; overflow:hidden;
      
      
    }
      /* IE won't read ID-and-class selectors like #zenbox_tab.left, so we use just a class: */
      .ZenboxTabLeft {
        left: 0;
        background-position: right 0;
      }
      .ZenboxTabRight {
        right: 0;
        background-position: left 0;
      }
      #zenbox_tab:hover {background-color: #444;}


    NAVIGATION MENU CSS

    Code:
    #nav{
    	
    	float:left;
    	width:1000px;
    	list-style:none;
    	font-weight:bold;
    	background:#55B947;
    	padding-left:20px;
    	height:45px;
    	background:url(../images/nav_bg.jpg) repeat;
    }
    #nav li{
    	float:left;
    	xmargin-right:10px;
    	xmargin-left:20px;
    	position:relative;
    	display:block;
    	padding-top: 10px;
    	padding-right: 5px;
    	border-right: 1px solid #fff;
    }
    #nav li a{
    	display:block;
    	padding:5px;
    	color:#fff;
    	background:#55B947;
    	text-decoration:none;
    
    	text-shadow:1px 1px 1px rgba(0,0,0,0.75); /* Text shadow to lift it a little */
    	-moz-border-radius:2px;
    	-webkit-border-radius:2px;
    	border-radius:2px;
    }
    #nav li a:hover{
    	color:#fff;
    	background:#0E3D7C; /* Solid colour fall-back */
    	background:rgba(107,12,54,0.75); /* It'll look nice semi-transparent */
    	text-decoration:underline;
    }
    
    /*--- DROPDOWN ---*/
    #nav ul{
    
    	position:absolute;
    	z-index:10;
    	list-style:none;
    	left:-9999px; /* Hide off-screen when not needed (this is more accessible than display:none;) */
    	opacity:0; /* Set initial state to transparent */
    	-webkit-transition:0.25s linear opacity; /* Make the dropdown fade-in in Webkit */
    }
    #nav ul li{
    	position:relative;
    	z-index: 99999;
    	padding-top:1px; /* Introducing a padding between the li and the a give the illusion spaced items */
    	float:none;
    	background:#55B947;
    }
    #nav ul a{
    	white-space:nowrap; /* Stop text wrapping and creating multi-line dropdown items */
    	display:block;
    }
    #nav li:hover ul{ /* Display the dropdown on hover */
    	left:0; /* Bring back on-screen when needed */
    	opacity:1; /* Fade to opaque */
    }
    #nav li:hover a{ /* Set styles for top level when dropdown is hovered */
    	background:#55B947; /* Solid colour fall-back */
    	e semi-transparent */
    	text-decoration:underline;
    }
    #nav li:hover ul a{ /* Override some top level styles when dropdown is hovered */
    	text-decoration:none;
    	-webkit-transition:-webkit-transform 0.075s linear;
    }
    #nav li:hover ul li a:hover{ /* Set styles for dropdown when items are hovered */
    	background:#333; /* Solid colour fall-back */
    	background:rgba(51,51,51,0.75); /* It'll look nice semi-transparent */
    	text-decoration:underline;
    	-moz-transform:scale(1.05);
    	-webkit-transform:scale(1.05);
    }
    CSS CODE FOR THE HISTORY TIMELINE CONTAINER

    Code:
    position:relative;
    	width:960px;
    	text-align:center;
    	margin-bottom: 30px;
    	z-index:1000;
    Last edited by hass1980; 02-17-2011 at 11:16 AM.

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,748
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Hello hass1980,
    It seems IE looks at position: relative; different than you would like. Try changing that #zenbox_main to position: absolute; and the z-index should work better.
    To do this, you will need to make the parent div relative so #zenbox_main doesn't move around with different resolutions.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •