0 Replies - 5123 Views - Last Post: 27 March 2011 - 03:53 PM

#1 the1corrupted  Icon User is offline

  • D.I.C Head

Reputation: 13
  • View blog
  • Posts: 165
  • Joined: 31-March 09

DIV Overlays and Firefox 4

Posted 27 March 2011 - 03:53 PM

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?

Is This A Good Question/Topic? 1
  • +

Page 1 of 1