ModalBox IE6 Black Background Fix

AddThis Social Bookmark Button

Fixing Black Background in Internet Explorer 6

Modal windows are used in lots of online websites today and there are many different types of these modal dialogs. I have used GreyBox with great success but my current preference is ModalBox becuase its based on Protytpe or Scriptaculous which I already use all the time. In IE6, ModalBox makes the background screen all black instead of fading it out with transparency as seen in FireFox and even IE7. This happens to most of the modal dialogs on the web so here is an old school solution to fix this issue.

This solution is usually used as an alternative method of fixing IE6 inability to properly display transparent PNGs. There are CSS and JS IE6 PNG fixes but if you are in a situation where you need a background image to tile or repeat, none of these fixes will work. The solution is to create a background GIF image that tiles and is 4X4 pixels in size with two pixels that are transparent and two pixels that have color. Look at the image below, the white space is actually transparent space which appears white because my background is white:

ModalBox IE6 Black Screen Fix

To make this work for ModalBox, put the image above in the images folder and add one line to the modalbox.css file:

in #MB_overlay, add _background:url(modal.gif) and it should work.

Popularity: 4%


Tags:

,


If you enjoyed this post, please consider to leave a comment.

Comments

No comments yet.

Leave a comment

(required)

(required)