ajax messing up with ie

[s4crificed]

I'm trying to do a css drow-down menu.

when i simply put its code into div-it works perfectly.
Here's demo: http://dophp.info/dem.html

But when i load it's content into div with ajax, in IE it doesn't pop out.
demo: http://dophp.info/dem2.html

Thanks for help.

[Jesdisciple]

My guess is that IE already applied all CSS to the elements at the start and isn't prepared for AJAX to introduce new elements that haven't been informed of the CSS. Translating the CSS rules to JS and calling them from loadurl may fix your problem. I suggest that you only give this JS to IE but give the CSS to everyone else because it will run better.

[s4crificed]

My guess is that IE already applied all CSS to the elements at the start and isn't prepared for AJAX to introduce new elements that haven't been informed of the CSS. Translating the CSS rules to JS and calling them from loadurl may fix your problem. I suggest that you only give this JS to IE but give the CSS to everyone else because it will run better.

Could you give an example of css translated to js? i don't understand what you mean

[Jesdisciple]

#menu a {
color: #000;
background: #efefef;
text-decoration: none;
}

#menu a:hover {
color: #a00;
background: #fff;
}

These could be replaced by this JS in triggered:

var menu = document.getElementById('menu');
menu.onmouseout = function(){
    menu.style.color = '#000';
    menu.style.background = '#efefef';
};
menu.onmouseover = function(){
    menu.style.color = '#a00';
    menu.style.background = '#fff';
};
menu.style.textDecoration = 'none';
menu.onmouseout();//no need to write the same code twice

Note that this is untested. Giving this only to IE could be implemented in PHP or whatever server-side script you use. If you don't use a server-side script, you could use a JS browser-detect with an if-statement around the above code instead. EDIT: My apologies; this would need to traverse the DOM and find all A elements under menu. Unfortunately, I don't have time to implement this right now.

[Jesdisciple]

Download Prototype (http://www.prototypejs.org/assets/20...6/prototype.js) for this...

var link = $$('#menu a');
link.onmouseout = function(){
    link.style.color = '#000';
    link.style.background = '#efefef';
};
link.onmouseover = function(){
    link.style.color = '#a00';
    link.style.background = '#fff';
};
link.style.textDecoration = 'none';
link.onmouseout();//no need to write the same code twice