This DIV is not shown on Internet Explorer

Question

Hi

I need to do some alert-message (like validations, etc), and I'm doing that with DIV.

This is how I'm doing the validation:

<form action="index.php" method="post" onsubmit="return validateSearchKeyword();">
     <input class="text_search" id="text_search" name="text_search" type="text" value="pesquisar" onfocus="if (this.value=='pesquisar') this.value = ''" onBlur="if (this.value=='') this.value = 'pesquisar'"  />
    </form>

and validation function:

function validateSearchKeyword()
{
if (document.getElementById('text_search').value==""){creatediv('divAvisoPesquisa','You must supply a value', '355px', '125px');return false;}
}

This is the function to create the DIV:

function creatediv(id, html, left, top) {

if (document.getElementById(id)) 
    {
     //document.getElementById(id).style.display='block';
     //fadeIn(id, 300);
    }
    else
    {
     var newdiv = document.createElement('div');
     newdiv.setAttribute('id', id);
     newdiv.setAttribute("class", "warningDiv"); 
     newdiv.style.position = "absolute";
     newdiv.innerHTML = html;
     newdiv.style.left = left;
     newdiv.style.top = top;
     newdiv.style.display = "none";
     newdiv.onclick=function(e) {
      $(this).fadeOut(300, function() { $(this).remove(); });
     };  
     document.body.appendChild(newdiv);
     $("#"+id).fadeIn(300); 
    }
}

The fadIn and fadeOut functions are from "jquery-1.3.1.min.js"

The CSS...

.warningDiv{
    -moz-border-radius-bottomleft:15px;
    -moz-border-radius-bottomright:15px;
    -moz-border-radius-topleft:15px;
    -moz-border-radius-topright:15px;
    font-size:11px;
    font-weight:bold;
    height:55px;
    padding:15px 25px;
    width:320px;
    z-index:100000;
    display: block;
}

So, this is working great for all browsers, except Internet Explorer. Even the validation works (the form is not submitted when it doesn't pass the validation) but the DIV is not shown. How can I solve this?

Thanks

Answer 1

I'm almost sure JQuery's .fadeIn doesn't work on IE6.

Try your function without the fade effect or change the effect call to this:

$("#"+id).fadeIn(300,function() { $(this).show(); });

Answer 2

I think I've got it. It seems IE doesn't apply classes the right way if you use:

    newdiv.setAttribute("class", "warningDiv");

Try using this instead:

    newdiv.className="warningDiv";

... I just tested, and it shows all the proper CSS properties in IE developer toolbar, which it wasn't doing using the former.