[the1corrupted]

The fourth edition of Firefox is here! It's sleek, neat, and incredibly cool. However, there's a problem.

As it arose in the middle of a project, I can catch this issue in its infancy but there's a problem with Firefox's CSS height/width percentages. I created an overlaying DIV that acts as a floating transparent background that doesn't do much but look really cool.

However, with this issue, it doesn't display properly in Firefox 4. Not like Firefox 3.6!

CSS:

DIV.overlay#bg {
	position: absolute;
	z-index: 10;
	background: #000000;
	opacity: .5;
	filter: alpha(opacity=50);
	border: none;
	top: 0px;
	left: 0px;
	width: 100%;
}

When I set the width to 100%, I get overflow on the body (meaning that a scrollbar appears on the bottom of the screen and I can scroll left/right). If I set it to 99%, it draws properly in Firefox, but now IE has an issue with it. The same applies to height.

Alternatively, if I try my old method of drawing an overlay in Firefox:

DIV.overlay#bg {
	position: absolute;
	z-index: 10;
	background: #000000;
	opacity: .5;
	filter: alpha(opacity=50);
	border: none;
	top: 0px;
	left: 0px;
	bottom: 0px;
	right: 0px;
}

It works, but again, IE doesn't like that method. Has anyone else encountered this bug?