div display and visibility behavior in IE

[NBostaph]

This is probably a relatively simple problem, but I'm not a CSS expert and it's been driving me absolutely insane for hours. Because I can't think of any good word to describe my problem besides "float", and that's an actual property name, my searches are coming up empty too. My sincerest appreciation to anyone who can shed some light on what I'm doing wrong.

I have the following pieces of code in a webpage:

function buildDimmerDiv() {
	document.write('<div id="dimmer" class="dimmer" style="width:'+
	window.screen.width + 'px; height:' + window.screen.height +'px; position:fixed; display:none;"></div>');
	document.getElementById('dimmer').style.opacity = 0.00;
}

function dimpage() {
	document.getElementById('dimmer').style.visibility = "visible";
	document.getElementById('dimmer').style.display = "block";
	dimmore();
}

function dimmore() {
	document.getElementById('dimmer').style.opacity = parseFloat(document.getElementById('dimmer').style.opacity) + 0.05;
	if (document.getElementById('dimmer').style.opacity < 0.85) {setTimeout("dimmore()", 25);}
}

buildDimmerDiv();

You can build a sample testing page using this code, though it will require a black image called dimmer.png:

<STYLE>
	div.dimmer
	{
		visibility: hidden;
		position:absolute;
		left:0px;
		top:0px;
		font-family:verdana;
		font-weight:bold;
		padding:40px;
		opacity:0.05;
	
		background-image:url(imgs/dimmer.png);
		/* ieWin only stuff */
			/* with this trick only IE
			   manage the following 2 attributes */
		filter:alpha(opacity=5)
		_background-image:none;
		_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader
			(enabled=true, sizingMethod=scale src='dimmer.png');
	}
</STYLE>
Text 1
<SCRIPT>
	function buildDimmerDiv() {
		document.write('<div id="dimmer" class="dimmer" style="width:'+
		window.screen.width + 'px; height:' + window.screen.height +'px; position:fixed; display:none;"></div>');
		document.getElementById('dimmer').style.opacity = 0.00;
	}
	
	function dimpage() {
		document.getElementById('dimmer').style.visibility = "visible";
		document.getElementById('dimmer').style.display = "block";
		dimmore();
	}
	
	function dimmore() {
		document.getElementById('dimmer').style.opacity = parseFloat(document.getElementById('dimmer').style.opacity) + 0.05;
		if (document.getElementById('dimmer').style.opacity < 0.85) {setTimeout("dimmore()", 25);}
	}
	
	buildDimmerDiv();
</SCRIPT>
Text 2

<SPAN ONCLICK="dimpage();" STYLE="cursor:pointer;">Click Here</SPAN>

In firefox and Chrome, when the dimpage function is called, the entire page appears to fade to darkness and then I can have another function make a content div visible to show some content over the faded area. This is exactly how I want it to work.

However, in IE8 (and I assume previous versions), when I call the dimpage function a black box the size of the page immediately appears, then under that the content div appears under that, and the rest of the page's existing content is pushed down even further. Obviously not how I want it to work.

The problem simply has to do with the fact that these divs are floating over the content in FF and Chrome, while in IE they are seen as elements that the rest of the page must flow around. The question I've been unable to answer: how do I make them 'float' above the content in IE like they do in FF and Chrome?

I know the opacity thing doesn't work in IE either, but I'm pretty sure I can figure that part out on my own later.

Thanks for reading.

[irukandji]

could you possibly put everything inside another container so that the new container loads first then the script you wrote is loaded second?

I know very little about scripting but enough about CSS to be dangerous...

HTML CODE

<div id="new_container">
YOUR SCRIPT GOES HERE
</div>

CSS CODE

body {
text-align:center; /* forces the wrap to be centered on page */
}
#new_container {
position:relative;
float:left;
width:100%;
height:100%; /* or auto for both width and height to size for every screen or your script */
margin:0;
padding:0;
text-align:left; /* allows for the text to be formatted to the left of the page  undoing the centering inside the body */
}

Now I'm not certain this will work as the script may be dependent upon something but usually this works for my html/css pages...

Hope it helps.

[EISD]

The way I would go around this is using absolute positioning and using the z-index to specify what goes on top of what more accurately.

[NBostaph]

Thanks for the comments. In the end the easiest solution ended up being:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Forcing IE into strict mode caused IE 7 and 8 to begin treating the 'fixed' attribute correctly, whereas they do not normally. This introduced a slew of other minor problems but they were easily correctable given enough time.

This doesn't do anything for IE6 and older, but I'm not hugely concerned about absolute compatibility so it's an okay solution for me.

Thanks again for the help.