• Sign in to Neowin Faster!

    Create an account on Neowin to contribute and support the site.

Archived

This topic is now archived and is closed to further replies.

  • 0

onMouseOver not working in IE?

Question

speedy_kevin    1

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!

Share this post


Link to post
Share on other sites

10 answers to this question

Recommended Posts

JoeC    107

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

Share this post


Link to post
Share on other sites
jackwanders    0

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

Share this post


Link to post
Share on other sites
Brian M.    773

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 :)

Share this post


Link to post
Share on other sites
speedy_kevin    1

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.

Share this post


Link to post
Share on other sites
JoeC    107

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

...border='0px'

Share this post


Link to post
Share on other sites
HopkinsProgramming    0

<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! :)

Share this post


Link to post
Share on other sites
speedy_kevin    1

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!

Share this post


Link to post
Share on other sites
HopkinsProgramming    0

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

Share this post


Link to post
Share on other sites
speedy_kevin    1

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

post-40724-1162828371.jpg

Share this post


Link to post
Share on other sites
HopkinsProgramming    0

try....

&lt;span style="display:block;width:100%;height:100%;"&gt;&lt;/span&gt;

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

See if that works. :)

Share this post


Link to post
Share on other sites

  • Recently Browsing   0 members

    No registered users viewing this page.