Hi there,
I need some help, I've created an iframe (to post files to server in AJAX application), and i wanted to customize input field for file with some images and CSS (reference http://www.quirksmode.org/dom/inputfile.html) and at part where i should put "filter:alpha(opacity=0)" it makes that part transparent (at input file field place), so i can see through iframe, i need to get rid of that. And just to mention, in Firefox it works just fine (with -moz-opacity), so i know its just a truble in IE. And i forgot, I used z-indexes to create input field above image "select file".

Here' the part of code where input field is:

PHP Code:

<div style='width: 682px; float:right;margin: 0 26px 10px 0;'>
                                <b>upload new avatar:</b><br/>
                                <div style="position: relative;top:0;left;0;">
                                    <input type="hidden" name="MAX_FILE_SIZE" value="<?echo $max_gallery_image_size;?>"/>  
                                        <input type="hidden" name="new_username" value="<? echo $user;?>"/>  
                                        <input type="file" name='avatar' onchange='javascript:document.getElementById("path").value = document.forms[0].elements[2].value;' style='position: relative;float:right;text-align: right;border:0px;color:#FFF;filter:alpha(opacity=0);-moz-opacity:0.0;background:transparent;z-index:1'/>
                                        <div style="position: absolute;top:0;left:0;">
                                            <div style='margin: 0px 0 10px 0;background: url(../../images/content/choose-file.gif) no-repeat;width: 70px; height: 21px;position:absolute;left: 618px;top: 2px;'>&nbsp;</div>
                                            <input type='text' id='path' name='path' style='margin: 0px 0 0 0;text-align: right;float: right;font-weight: bold;padding: 2px;height: 17px;float: left;display: block;width: 608px;'/>
                                        </div>
                                </div>
                            </div>

and here's the iframe object:

PHP Code:

<iframe src="" frameborder='0' id='popup_frame' name='popup_frame' width="750" height="" style='display:none;'></iframe> 


i really don't know where is the problem, and would appreciate help as soon as possible as it's urgent.

Thanks in advance!

EDIT:
I forgot to show you part of js code with "real" css:

PHP Code:

popup.style.setAttribute('cssText','border: 0px;display: block;filter: alpha(opacity='+blend+'); -moz-opacity:'+(blend/100)+';position:absolute;top: 100px; left:'+offset+'px;'); 


blend goes from 0 to 100 to make fade in effect, and offset is calculated to put iframe in middle of screen

Try to add to iframe: allowtransparency="true"







fastreplies

Originally Posted by fastreplies

Try to add to iframe: allowtransparency="true"

Thanks for reply, tried, but it doesn't work it's still transparent only at that part where the input field is, and i want to make it not transparent...

Anything else?