Z-Index causing problems with a gray-out?

Philip · July 7, 2007

Hey guys,

I've been wanting to try something for a while now, and I have finally found some coding that goes along with it. However, with the layout I am using for a site, it does not work. I know for a fact that it is IE's Z-Index stupidity, because it works fine in Firefox. I've tried 2 different sets of code to gray-out the background, and have tweaked both for the past mmm, 5 or 6 hours as well as using Google poking around for a solution.

Here's what I'm basically trying to accomplish

Here's whats happening with the style (click the Sign up! button)

Here's the current JS code (taken from here):

function showPopUp(el) {
var cvr = document.getElementById("cover")
var dlg = document.getElementById(el)
     cvr.style.display = "block"
     dlg.style.display = "block"
if(document.body.style.overflow = "hidden") {
   cvr.style.width = "100%"
   cvr.style.height = "100%"
}
}
function closePopUp(el) {
var cvr = document.getElementById("cover")
var dlg = document.getElementById(el)
     cvr.style.display = "none"
     dlg.style.display = "none"
  document.body.style.overflowY = "scroll"
}

Then the link calling it:

<a href="#" onclick="showPopUp('dialog');">(Sign up!)</a>

The CSS for the cover (the gray-out) and the Popup:

#cover {
display:none; 
position:absolute;
left:0px; 
top:0px;
width:100%;
height:100%;
background:gray;
filter:alpha(Opacity=50);
opacity:0.5;
-moz-opacity:0.5;
-khtml-opacity:0.5;
z-index:99;
}
#dialog {
display:none;
left:200px;
top:200px;
width:300px;
height:300px;
position:absolute;
z-index:100;
background:white;
padding:2px;
font:10pt tahoma;
border:1px solid gray;
}

The full CSS (yeah, it's an open source design, pretty sweet one I might add):

/*
LEGAL
=====
Copyright: Daemon Pty Limited 2006, http://www.daemon.com.au
Community: Mollio http://www.mollio.org $
License: Released Under the "Common Public License 1.0", 
http://www.opensource.org/licenses/cpl.php
License: Released Under the "Creative Commons License", 
http://creativecommons.org/licenses/by/2.5/
License: Released Under the "GNU Creative Commons License", 
http://creativecommons.org/licenses/GPL/2.0/
*/

/* THE BIG GUYS */
* {margin:0;padding:0}
body {padding: 0 0 20px;background: #F3EFE7 url("images/body_bg.gif") repeat-x 0 100%;color:#333;font:83%/1.5 arial,tahoma,verdana,sans-serif}

/* LINKS */
a,a:link,a:link,a:link,a:hover {background:transparent;text-decoration:underline;cursor:pointer} 
a:link {color:#3D3127} 
a:visited {color:#999} 
a:hover,a:active {color:#817159} 

/* FORMS */
form {margin: 0 0 1.5em}
input {font-family: arial,tahoma,verdana,sans-serif;margin: 2px 0}
fieldset {border: none}
label {display:block;padding: 5px 0}
label br {clear:left}
textare {font-family: arial,tahoma,verdana,sans-serif;margin: 2px 0}

/* FORMS - general classes */
input.f-submit {padding: 1px 3px;background:#645540;color:#fff;font-weight:bold;font-size:96%}

/* FORMS - f-wrap-1 - simple form, headings on left, form elements on right */
form.f-wrap-1 {width:100%;padding: .5em 0;background: #F3EFE7;border-top: 1px solid #d7d7d7;position:relative;}
	form.f-wrap-1 fieldset {width:auto;margin: 0 1em}
	form.f-wrap-1 h3 {margin:0 0 .6em;font: bold 155% arial;color:#3D3127}
	form.f-wrap-1 label {clear:left;float:left;width:100%;border-top: 1px solid #fff}

	/* hide from IE mac \*/
	form.f-wrap-1 label {float:none}
	/* end hiding from IE5 mac */

	form.f-wrap-1 label input, form.f-wrap-1 label textarea, form.f-wrap-1 label select {width:15em;float:left;margin-left:10px}

	form.f-wrap-1 label b {float:left;width:8em;line-height: 1.7;display:block;position:relative;}
	form.f-wrap-1 label b .req {color:#c00;font-size:150%;font-weight:normal;position:absolute;top:-.1em;line-height:1;left:-.4em;width:.3em;height:.3em;}
	form.f-wrap-1 div.req {color:#666;font-size:96%;font-weight:normal;position:absolute;top:.4em;right:.4em;left:auto;width:13em;text-align:right;}
	form.f-wrap-1 div.req b {color:#c00;font-size:140%}
	form.f-wrap-1 label select {width: 15.5em}
	form.f-wrap-1 label textarea.f-comments {width: 20em}
	form.f-wrap-1 div.f-submit-wrap {padding: 5px 0 5px 8em}
	form.f-wrap-1 input.f-submit {margin: 0 0 0 10px}

	form.f-wrap-1 fieldset.f-checkbox-wrap, form.f-wrap-1 fieldset.f-radio-wrap {clear:left;float:left;width:32em;border:none;margin:0;padding-bottom:.7em}
	form.f-wrap-1 fieldset.f-checkbox-wrap b, form.f-wrap-1 fieldset.f-radio-wrap b {float:left;width:8em;line-height: 1.7;display:block;position:relative;padding-top:.3em;}
	form.f-wrap-1 fieldset.f-checkbox-wrap fieldset, form.f-wrap-1 fieldset.f-radio-wrap fieldset {float:left;width:13em;margin: 3px 0 0 10px}
	form.f-wrap-1 fieldset.f-checkbox-wrap label, form.f-wrap-1 fieldset.f-radio-wrap label {float:left;width:13em;border:none;margin:0;padding:2px 0;margin-right:-3px}
	form.f-wrap-1 label input.f-checkbox, form.f-wrap-1 label input.f-radio {width:auto;float:none;margin:0;padding:0}

	form.f-wrap-1 label span.errormsg {position:absolute;top:0;right:-10em;left:auto;display:block;width:16em;background: transparent url(images/errormsg_bg.gif) no-repeat 0 0;}
	form.f-wrap-1 label span.errormsg b {padding: 10px 0;margin: 0 10px 0 30px;color:#B30800;font-weight:bold;display:block;width:auto;float:none;line-height:1.3}

/* TYPOGRAPHY */
p, ul, ol {margin: 0 0 1.5em; }/*z-index:2;*/
h1, h2, h3, h4, h5, h6 {letter-spacing: -1px;font-family: arial,verdana,sans-serif;margin: 1.2em 0 .3em;color:#000;border-bottom: 1px solid #eee;padding-bottom: .1em;}/*z-index:2;*/
h1 {font-size: 196%;margin-top:.6em;}
h2 {font-size: 136%}
h3 {font-size: 126%}
h4 {font-size: 116%}
h5 {font-size: 106%}
h6 {font-size: 96%}
.highlight {color:#E17000}
.subdued {color:#999}
.error {color:#c00;font-weight:bold}
.success {color:#390;font-weight:bold}
.caption {color:#999;font-size:11px}
.date {font: bold 82% arial;color:#bbb;display:block;letter-spacing: 1px}
small {font-size:11px}

/* LISTS */
ul {margin: .3em 0 1.5em 0;list-style-type:none}
ul.related {margin-top: -1em}
ol {margin: .5em .5em 1.5em}
ol li {margin-left: 1.4em;padding-left: 0;background: none; list-style-type: decimal}
li {line-height: 1.4em;padding-left: 25px;background: transparent url("images/sprites.gif") no-repeat 0 0}
li.doc {background-position: 3px -500px;}
ul.nomarker li {background:none;padding-left:0}

dl {margin: 0 0 1em 0}
dt {font-weight:bold;margin-top: 1.3em}
dl dl {margin: 0 0 1.5em 30px}

/* GENERAL */
img {border:none} 
hr {margin: 1em 0;background:#f2f2f2;height:1px;color:#f2f2f2;border:none;clear:both}
.clear {clear:both;position:relative;font-size:0px;height:0px;line-height:0px;} 

/* LAYOUT - HEADER */
#header {background: #666 url("images/sprites.gif") repeat-x 0 100%;margin: 0 0 25px;padding: 0 0 8px}

#header #site-name {font: 300% arial;letter-spacing: -.05em;margin:0 0 0 0px;padding:0px 0;color:#FFFFFF;border:none}
/* added the 2 lines below */
#header #site-name-small1 {font: 125% arial; letter-spacing: -.05em;margin:0 0 0 0px;padding:0px 0;color:#FFFFFF;border:none}
#header #site-name-small2 {font: 150% arial; letter-spacing: -.05em;margin:0 0 0 40px;padding:0px 0;color:#FFFFFF;border:none}

/* NAV - top horizontal nav */
#nav, #nav ul {padding: 0;margin: 0;list-style: none;z-index:1;}
#nav {;height:2.09em;font: bold 96% arial;margin: 0 105px 0 40px}
#nav li {position:relative;background: #645540;float: left;width: 10em;display:block;margin: 0;border-bottom: 3px solid #342B20;border-right: 3px solid #000000;padding:0;}
#nav a, #nav a:link, #nav a:visited, #nav a:active {text-decoration:none;cursor:pointer;color:#FFF;display: block;padding: 4px 10px 2px}
#nav a:hover {color:#FFF;font-weight:bold;}
#nav li ul {border:none;background: #FFF url("images/featurebox2_bg.gif") no-repeat 100% 100%;width:15.8em;font-size:90%;margin-top:3px;position: absolute;font-weight:normal;left: -999em;}
#nav li:hover ul, #nav li.sfhover ul {left: 0; background-position: 0 0;  min-height:0;}

#nav li li {background: #645540;border-bottom: 2px solid #000000;padding-left:0; }/*A49377*/
#nav li li a:hover {background: #666 url("images/sprites.gif") repeat-x 0 99%;color:#fff}
#nav li li a, #nav li li a:link, #nav li li a:visited, #nav li li a:hover {padding: 3px 10px 2px;width:14em}
#nav li li.last {border-bottom:none}

#nav li.active {background: #A49377;border-bottom: 3px solid #645540;}
#nav li.active ul {border:none;background: #FFF url("images/featurebox2_bg.gif") no-repeat 100% 100%}
#nav li.active a:link, #nav li.active a:visited, #nav li.active a:hover, #nav li.active a:active {}
#nav li.active a:hover {color:#000}

#nav li.active li {border:none;border-top: 1px solid #000;border-bottom: 1px solid #000} /*c15c5c*/
#nav li.active li.last {border-bottom: none}
#nav li.active li a:link, #nav li.active li a:visited, #nav li.active li a:hover, #nav li.active li a:active {color:#fff}
#nav li.active li a:hover {background: #666 url("images/sprites.gif") repeat-x 0 99%;color:#fff}

#nav li.active li.active a:link, #nav li.active li.active a:visited, #nav li.active li.active a:hover, #nav li.active li.active a:active {color:#fff;font-weight:bold;background: #666 url("images/sprites.gif") repeat-x 0 99%}

/* hide from IE mac \*/
#nav li {width:auto}
/* end hiding from IE5 mac */

/* SEARCH */
#search {color:#fff;font-weight:bold;position:absolute;top:10px;right:110px;left:auto;width:18em;}
#search form {margin:0}
#search input {width:8em;margin: 0 0 -1px;height:1.2em}
#search label {padding:5px 0 0;display:inline}
#search input.f-submit {width:auto;font-size:81%;margin:0 0 -.15em;height:1.95em}

/* wagonwheel */
#poweredby {width:59px;height:63px;position:absolute;top:-150px;right:0;}

/* LAYOUT - main body of page */
#wrap {min-width:770px;max-width:1200px;margin: 0 auto;position:relative;}
#content-wrap {position:relative;width:100%;}
#utility {position:absolute;top:0;left:25px;width:165px;border-top: 5px solid #999;padding-bottom: 40px;}
#sidebar {position:absolute;top:0;right:25px;width:20%;border-top: 5px solid #999;padding-top: 1px;padding-bottom: 40px;}

#content {position:relative;margin: 0 25px;}
#content #breadcrumb {margin-top:-5px;font-size:93%;font-weight:bold}
#content #breadcrumb a:link, #content #breadcrumb a:visited {text-decoration:none}
#content #breadcrumb a:hover, #content #breadcrumb a:active {text-decoration:underline}

.featurebox {color:#333;padding: 15px 20px 20px;border-top: 1px solid #d7d7d7;margin: 0 0 1.5em;}
.featurebox p, .featurebox h1, .featurebox h2, .featurebox h3, .featurebox h4, .featurebox h5, .featurebox h6 {margin: 0 0 .3em;border-bottom: 1px solid #000;color:#000}
.featurebox p {border:none;margin: 0 0 1em;color:#000}
.featurebox a {font-weight:bold}


.thumbnail {margin: 0 0 0 10px;position:relative;float:right;width:100px;padding:5px;background:#F3EFE7}
.thumbnail img {border: 1px solid #F3EFE7}

.pagination {background: #f2f2f2;color:#666;padding: 4px 2px 4px 7px;border: 1px solid #ddd;margin: 0 0 1.5em}
.pagination p {position:relative;text-align:right;}
.pagination p a:link, .pagination p a:visited, .pagination p a:hover, .pagination p a:active {text-decoration:none;background:#fff;padding:2px 5px;border: 1px solid #ccc}
.pagination p a:hover {background:#342B20;color:#fff}
.pagination p span {text-decoration:none;background:#fff;padding:2px 5px;border: 1px solid #ccc;color:#ccc}
.pagination * {margin:0}
.pagination h4 {margin-top:-1.45em;padding:0;border:none}

#cover {display:none; position:absolute;left:0px; top:0px;width:100%;height:100%;background:gray;filter:alpha(Opacity=50);opacity:0.5;-moz-opacity:0.5;-khtml-opacity:0.5;z-index:99;}
  #dialog {display:none;left:200px;top:200px;width:300px;height:300px;position:absolute;z-index:100;background:white;padding:2px;font:10pt tahoma;border:1px solid gray;}

#resultslist-wrap {margin: 0 0 1.5em;font-size:92%}
#resultslist-wrap dt, #resultslist-wrap dl {margin: 0}
#resultslist-wrap dt {font: bold 85% arial;padding: 3px 0}
#resultslist-wrap li {padding: 0 0 1em;margin:0 0 0 1.2em;font: bold 145% arial}
#resultslist-wrap li dd {font: normal 73% arial}
#resultslist-wrap li dl {margin:0}
#resultslist-wrap dd {line-height:1.3}
#resultslist-wrap dd.filetype, #resultslist-wrap dd.date {color:#999;display:inline;padding-right:.5em}

/* TABLES */
.table1 {border: 2px solid #000;border-collapse:collapse;width:100%}
	.table1 td {background: #fff url("images/sprites.gif") repeat-x 0 -1600px;padding:3px;border: 1px solid #ddd}
	.table1 th {text-align:left;border: 1px solid #ddd}
	.table1 thead th {color:#fff;font-size:145%;background: #900 url("images/sprites.gif") repeat-x 0 -1300px;padding: 10px 6px}
	.table1 tbody th {color:#fff;font-size:115%;background: #88b8db url("images/sprites.gif") repeat-x 0 -1400px;padding: 6px}
	.table1 tbody th.sub {font-size:100%;color:#000;background: #efefef url("images/sprites.gif") repeat-x 0 -1500px;padding: 6px}

/* TABLES - calendar */
.calendar {width:200px;font-size:92%}
	.calendar td {text-align:center;border: 1px solid #ddd}
	.calendar th {text-align:center;border: 1px solid #ddd}
	.calendar thead th {padding: 3px 2px;border: 1px solid #ddd}
	.calendar tbody th {padding: 2px;border: 1px solid #ddd}
	.calendar tbody th.sub {padding: 2px;border: 1px solid #ddd}

/* 'MORE' LINK - provides an accessible alternative to just using 'more' as a link at the end of paragraphs */
	a.morelink:link, a.morelink:visited, a.morelink:hover, a.morelink:active {background: transparent url("images/sprites.gif") no-repeat 5px -500px;padding-left:21px}
	a.morelink:hover {background: transparent url("images/sprites.gif") 5px -400px}
	.morelink span {position:absolute;left:-9999px;width:900px;}

/* CODE - formatting for code inserted into body - more here: http://dizque.lacalabaza.net/temp/lipt/ */
	ol.code {font-family: monospace;position:relative;}
	ol.code li {color: #666;margin-bottom: 1px}
	ol.code code {color: #000;display: block}
	ol.code .cmt {color: #4077d2}
	li.tab0 code {padding-left: 4em}
	li.tab1 code {padding-left: 8em}
	li.tab2 code {padding-left: 12em}
	li.tab3 code {padding-left: 16em}
	li.tab4 code {padding-left: 20em}
	li.tab5 code {padding-left: 24em}
	ol.code li  {background: #f3f3f3 url("images/td_bg.gif") no-repeat 100% 100%}
	p.note {margin: 1em;border: 1px solid #ddd;background: #f0f0f0;padding: 1em}

/* LAYOUT TYPE E */
#type-e #content-wrap {background: transparent url("images/content_wrap_e_bg.gif") repeat-y 100% 0}
#type-e #utility {position:absolute;top:0;left:auto;right:25px;width:165px;border-top: 5px solid #999; }
#type-e #content {margin: 0 243px 0 50px}

/* SECONDARY NAVIGATION - vertical navigation */
#nav-secondary, #nav-secondary ul {position:static;}
#nav-secondary, #nav-secondary li {list-style: none;margin:0;padding:0;background:#F3EFE7}
#nav-secondary {padding-top:0;border-top: 1px solid #ccc;margin-top: 1px}
#nav-secondary a {line-height:1.8;padding: 5px 0 5px 23px;background: #F3EFE7 url("images/sprites.gif") no-repeat 10px -695px;font: bold 86% arial;display:block}
#nav-secondary a, #nav-secondary a:link, #nav-secondary a:visited, #nav-secondary a:hover, #nav-secondary a:active {text-decoration:none;cursor:pointer} 
#nav-secondary a:link {color:#000} 
#nav-secondary a:visited {color:#000} 
#nav-secondary a:hover {color:#c00;background: #fee url("images/sprites.gif") no-repeat 10px -695px} 
#nav-secondary li.active a:link, #nav-secondary li.active a:visited, #nav-secondary li.active a:hover, #nav-secondary li.active a:active {color:#c00} 
#nav-secondary li {border-top: 1px solid #fff;border-bottom: 1px solid #ccc}

/* SECONDARY NAVIGATION - 2nd TIER */
#nav-secondary ul {margin: 0 0 1em 23px;padding:0}
#nav-secondary li.active li a, #nav-secondary li.active li a:link, #nav-secondary li.active li a:visited {line-height:1.5;background: #fff url("images/sprites.gif") no-repeat 0 -798px;padding:0 0 0 12px;font-weight:normal;width:auto;color:#000;width:130px;display:block}
#nav-secondary li.active li a:hover, #nav-secondary li.active li a:active {color: #c00}
#nav-secondary li.active li {border: none;margin:0}

#nav-secondary li.active li.active a:link, 
#nav-secondary li.active li.active a:visited, 
#nav-secondary li.active li.active a:hover, 
#nav-secondary li.active li.active a:active {font-weight:bold}

/* SECONDARY NAVIGATION - middle */
  #nav-secondary ul {margin: 0 0 1em 23px;padding:0}
#nav-secondary li.na li a, #nav-secondary li.na li a:link, #nav-secondary li.na li a:visited {line-height:1.5;background: #fff url("images/sprites.gif") no-repeat 0 -798px;padding:0 0 0 12px;font-weight:normal;width:auto;color:#000;width:130px;display:block}
#nav-secondary li.na li a:hover, #nav-secondary li.na li a:active {color: #c00}
#nav-secondary li.na li {border: none;margin:0}

#nav-secondary li.na li.na a:link, 
#nav-secondary li.na li.na a:visited, 
#nav-secondary li.na li.na a:hover 
#nav-secondary li.na li.na a:active {font-weight:normal}

/* SECONDARY NAVIGATION - 3rd TIER */
#nav-secondary ul ul {margin: 0 0 1em 13px;padding:0}
#nav-secondary li.active li.active li a, #nav-secondary li.active li.active li a:link, #nav-secondary li.active li.active li a:visited {width:117px}
#nav-secondary li.active li.active li a:link, 
#nav-secondary li.active li.active li a:visited, 
#nav-secondary li.active li.active li a:hover, 
#nav-secondary li.active li.active li a:active {font-weight:normal}
#nav-secondary li.active li.active li.active a:link, 
#nav-secondary li.active li.active li.active a:visited, 
#nav-secondary li.active li.active li.active a:hover, 
#nav-secondary li.active li.active li.active a:active {font-weight:bold}

/* SECONDARY NAVIGATION - 4th TIER */
#nav-secondary ul ul ul {margin: 0 0 1em 13px;padding:0}
#nav-secondary li.active li.active li.active li a, #nav-secondary li.active li.active li.active li a:link, #nav-secondary li.active li.active li.active li a:visited {width:104px}
#nav-secondary li.active li.active li.active li a:link, 
#nav-secondary li.active li.active li.active li a:visited, 
#nav-secondary li.active li.active li.active li a:hover, 
#nav-secondary li.active li.active li.active li a:active {font-weight:normal}
#nav-secondary li.active li.active li.active li.active a:link, 
#nav-secondary li.active li.active li.active li.active a:visited, 
#nav-secondary li.active li.active li.active li.active a:hover, 
#nav-secondary li.active li.active li.active li.active a:active {font-weight:bold}

/* LAYOUT - FOOTER */
#footer {clear:both;border-top: 1px solid #E3E8EE;padding: 10px 0 30px;font-size:86%;color:#999}
#footer p {margin:0}
#footer a:link {color:#999}

Any ideas on where the Z-Index needs to be placed for IE to see it okay?

soycharliente · July 7, 2007

What exactly is wrong? It looks like it's working to me.

Philip · July 7, 2007

Take a look at it in IE, sorry. It doesn't work in IE7, and I am not able to test the others, so I'm not sure what it looks like in IE 6 or 5

I thought I said something about IE. I was tired

mainewoods · July 9, 2007

instead of coding z-index, add the new item to the end of the doc, then set absolute coordinates to on top of the other items. This method works in all browsers. Make the item you want to overlay the other ones last in the source code.

Philip · July 9, 2007

I tried that last night, I'm not sure if I'm doing it 100% the way you are saying though. Here's the new code:

JS Code:

function grayOut(vis, el, options) {
  // Pass true to gray out screen, false to ungray
  // options are optional.  This is a JSON object with the following (optional) properties
  // opacity:0-100         // Lower number = less grayout higher = more of a blackout
  // zindex: #             // HTML elements with a higher zindex appear on top of the gray out
  // bgcolor: (#xxxxxx)    // Standard RGB Hex color code
  // grayOut(true, {'zindex':'50', 'bgcolor':'#0000FF', 'opacity':'70'});
  // Because options is JSON opacity/zindex/bgcolor are all optional and can appear
  // in any order.  Pass only the properties you need to set.
  var options = options || {};
  var zindex = options.zindex || 50;
  var opacity = options.opacity || 70;
  var opaque = (opacity / 100);
  var bgcolor = options.bgcolor || '#000000';
  var dark= document.getElementById('darkenScreenObject');
var dlg = document.getElementById(el)
  if (!dark) {
    // The dark layer doesn't exist, it's never been created.  So we'll
    // create it here and apply some basic styles.
    // If you are getting errors in IE see: http://support.microsoft.com/default.aspx/kb/927917
    var tbody = document.getElementsByTagName("body")[0];
    var tnode = document.createElement ('div');           // Create the layer.
        tnode.style.position='absolute';                 // Position absolutely
        tnode.style.top='0px';                           // In the top
        tnode.style.left='0px';                          // Left corner of the page
        tnode.style.overflow='hidden';                   // Try to avoid making scroll bars           
        tnode.style.display='none ';                      // Start out Hidden
        tnode.id='darkenScreenObject';                   // Name it so we can find it later
    tbody.appendChild(tnode);                            // Add it to the web page
    dark=document.getElementById('darkenScreenObject');  // Get the object.
  }
  if (vis) {
    // Calculate the page width and height
    if( document.body && ( document.body.scrollWidth || document.body.scrollHeight ) ) {
        var pageWidth = document.body.scrollWidth+'px';
        var pageHeight = document.body.scrollHeight+'px';
    } else if( document.body.offsetWidth ) {
      var pageWidth = document.body.offsetWidth+'px';
      var pageHeight = document.body.offsetHeight+'px';
    } else {
       var pageWidth='100%';
       var pageHeight='100%';
    }  
    //set the shader to cover the entire page and make it visible.
    dark.style.opacity=opaque;                     
    dark.style.MozOpacity=opaque;                  
    dark.style.filter='alpha (opacity='+opacity+')';
    dark.style.zIndex=zindex;       
    dark.style.backgroundColor=bgcolor; 
    dark.style.width= pageWidth;
    dark.style.height= pageHeight;
    dark.style.display= 'block ';
	dlg.style.display= 'block ';
	                         
  } else {
     dark.style.display= 'none';
	 dlg.style.display= 'none';
  }
}

CSS:

/* horizon used to get absolute center */
#horizon 
{
text-align: center;	
position: absolute;	
top: 50%;	
left: 0px;	
width: 100%;	
height: 0px;	
overflow: visible;	
visibility: visible; 
display: block; 
z-index:100	
}
/*Pop-up box*/
#dialog  
{
display:none;
font:10pt tahoma;
border:1px solid gray;	
background-color: #f00;	
margin-left: -125px;	
position: absolute;	
top:150px;	
left: 50%;	
width:250px;	
height: 210px;	
z-index:100;
background:white;
padding:2px;
}
/*Gray-out*/
#cover 
{
display:none; 
position:absolute;
left:0px; 
top:0px;
width:100%;
height:100%;
background:gray;
filter:alpha(Opacity=50);
opacity:0.5;
-moz-opacity:0.5;
-khtml-opacity:0.5;
z-index:99;
}

HTML:

(I have more, but this is the end)

...
<?php include $path."/css/php/footer1.php"; ?>
	<div id="horizion">
      <div id="dialog">
        <form action="/info_newsletter.php" method="post" class="f-wrap-1">
          <h3>Newsletter Signup:</h3>
           <b>Email Address:</b><br />
             <input id="email" name="email" type="text" tabindex="1" maxlength="75" value=""/><br />
      		<b>Confirm Email Address:</b><br />
           	<input id="email2" name="confirm_email" type="text" tabindex="1" maxlength="75" value=""/><br />
      		<p class='highlight'>This must be a valid email address!</p>
      						
           <input type="submit" value="Submit!" class="f-submit" tabindex="3" />

				<div align="center"><a href="#" onclick="grayOut(false, 'dialog');">Close [X]</a></div></form>
      </div>
	</div>
</body>
</html>

I'm just not sure what I exactly need to change to get it the way you're saying, but I get the basic idea

Thanks for the help

mainewoods · July 9, 2007

I ran your signup link and it came up with a js error in ie. It said 'line 80 character 9 can not get display property'. On line 79 of your js file, I found this:

      tnode.style.display='none ';

--has an extra space after 'none '! I wouldn't think that would break it but it's ie!

Philip · July 9, 2007

Whoopsies, I thought I got rid of that last night. I noticed it too. Guess I forgot to upload the new file (Stupid me)

Sign In

Z-Index causing problems with a gray-out?

Recommended Posts

Philip

Link to comment

Share on other sites

soycharliente

Link to comment

Share on other sites

Philip

Link to comment

Share on other sites

mainewoods

Link to comment

Share on other sites

Philip

Link to comment

Share on other sites

mainewoods

Link to comment

Share on other sites

Philip

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information