onMouseOver not working in IE?

[speedy_kevin]

Does anybody sees something wrong in the following code. It's used for a drowdown menu.

It works fine in Firefox but in IE it does nothing! Also tried replacing the code with a simple alert onmouseover but that one also is not working in IE.

<li width="230" id="cat'.$counter.'" class="menu_main" onmouseover="this.style.backgroundColor=\''.$l_aData['color'].'\';  document.getElementById(\'box'.$counter.'\').style.border=\'0\';" onMouseOut="this.style.backgroundColor=\'#568AE1\'; document.getElementById(\'box'.$counter.'\').style.border=\'1\';">
</li>

There are some PHP variables in the code. Those are all correct!

As you can see in the code I also tried with or without caps.

Also checked if 2 actions on a mouseover is supported and yes it is, so that won't be problem. Also tried removing one action, again not working in IE.

I don't have it running online. Testing it on a local server.

Hopefully anyone got a idea, it doesn't look pretty nice without that mouseover :p

Thx guys!

[JoeC]

Try onmouseover instead of onMouseOver, because onMouseOver doesn't technically exist (and JS WILL kick off about it not existing).

[jackwanders]

could you provide the resulting HTML, instead of the PHP used to generate it? That would make things a bit easier to dissect.

[Brian M. Veteran]

Try onmouseover instead of onMouseOver, because onMouseOver doesn't technically exist (and JS WILL kick off about it not existing).

I personally always use onmouseOver - old habits die hard :)

[speedy_kevin]

Here is the html code it generates:

<li width="230" id="cat1" class="menu_main" onMouseOver="this.style.backgroundColor='#ff0000';  document.getElementById('box1').style.border='0';" onMouseOut="this.style.backgroundColor='#568AE1'; document.getElementById('box1').style.border='1';"><li>

I tried onMouseOver and onmouseover, both did not work.

[JoeC]

Sometimes, setting border to equal just a number fails miserably, possibly try

...border='0px'

[HopkinsProgramming]

<ul>
<li width="230" id="cat1" class="menu_main" onmouseover="this.style.backgroundColor='#ff0000';  document.getElementById('box1').style.border='0';" onmouseout="this.style.backgroundColor='#568AE1'; document.getElementById('box1').style.border='1';">Test Me!</li>
</ul>

That works fine for me in Firefox 2.0, IE 7 final, IE 6+SP2, and Opera 9.02.

The only things I did to it when I put it on my test page are:

- Added the <ul> and </ul> tags

- Changed "onMouseOver" and "onMouseOut" to all lowercase characters

- Added text inside the list item - "Test Me!" (Having no text caused it to not work in IE). if for some reason it needs to be blank, which it shouldn't, then use " " to put a space in there, so it will work.

Hope that helps! :)

[speedy_kevin]

Thanks Hopkins!

I tried your code and yes it works fine in IE6.

However when I try to use it in in my total code, its not working anymore.

There must be something else wrong in my code causing the <li> mouseovers not to work in IE, but I don't have the time to search for this.

So I did a very naughty thing :p

Placed a browser check in my php. If the browser is IE it places a <span> around the <li>, within the <span> i placed the mouseovers and removed the mouseovers from the <li>.

Otherwise if the browser is not IE it uses the normal code.

Thanks everyone for the suggestions!

[HopkinsProgramming]

You tried it w/ some text inside the <li> ?

Try adding the span (heck... maybe even give it a height/width/display:block;) inside the <li>... no point in invalidating your html on purpose. :p

[speedy_kevin]

Yes I tried it with text, in the menu it has a <a> in the li items.

When I place the span inside the li it only triggers if I mouseover on the text, not the whole area. The dropdown part which is done with PHP triggers on the whole area so it looks kinda odd if the mouseovers for the background color is not responding then.

The complete php/html code is a bit more complicated.

I attached a picture with how it looks with a mouseover of the second menu item

[HopkinsProgramming]

try....

<span style="display:block;width:100%;height:100%;"></span>

Adding in those style will cause the span to fill its containter (the <a> or <li>, however you have it).

See if that works. :)