Web Hosting Talk






PDA

View Full Version : IE problem - CSS, JavaScript

mayonaise
10-04-2004, 03:42 PM
i have several DIVs that i would like to hilight onMouseOver. the script works perfectly in firefox, opera, and SOMETIMES in IE. the example below does not work! what doesn't work about it? they will only hilight when the mouse moves over the link inside of the DIV, and not simply when the mouse moves over any part of the DIV itself

the modified section of code farther below DOES work.

code example:

<html>
<head>
<title>IE sucks</title>
<style> <!--
.sideBar {
position: absolute;
visibility: visible;
width: 150;
left: 0;
top: 67;
z-index: 0;
}
--> </style>
<script language="javascript"> <!--
function backgroundOn(name)
{
document.getElementById(name).style.backgroundColor = "#F0A61A"
}

function backgroundOff(name)
{
document.getElementById(name).style.backgroundColor = "transparent";
}
// -->
</script>
</head>
<body text="#454545" alink="#EEEEEE" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<div class="home">
<font face="arial,helvetica" size="2">
<div class="sideBar">
<div id="sideMenu" class="bgDark">
<div id="sideHeader"><STRONG>Home</STRONG></div>
<A id="sideLink" HREF="?section=home&page=news">
<DIV class="sideItem" id="sideItem_news" onMouseOver="backgroundOn('sideItem_news')" onMouseOut="backgroundOff('sideItem_news')">
news
</DIV>
</A>
<A id="sideLink" HREF="?section=home&page=policies">
<DIV class="sideItem" id="sideItem_policies" onMouseOver="backgroundOn('sideItem_policies')" onMouseOut="backgroundOff('sideItem_policies')">
policies
</DIV>
</A>
<A id="sideLink" HREF="?section=home&page=policies#rights">
<DIV class="sideItem" id="sideItem_rights" onMouseOver="backgroundOn('sideItem_rights')" onMouseOut="backgroundOff('sideItem_rights')">
student's rights
</DIV>
</A>
<A id="sideLink" HREF="?section=about&page=contact">
<DIV class="sideItem" id="sideItem_contact" onMouseOver="backgroundOn('sideItem_contact')" onMouseOut="backgroundOff('sideItem_contact')">
contact us
</DIV>
</A>

</div>
</div>

</font>
</div>
</body>
</html>

by either removing the lines noted below, OR removing all of the attributes from the .sideBar style, the hilighting works properly. I DON'T GET IT!!! again, this works perfectly in opera and firefox.

<!-- remove this line - <div class="sideBar"> -->
<div id="sideMenu" class="bgDark">
<div id="sideHeader"><STRONG>Home</STRONG></div>
<A id="sideLink" HREF="?section=home&page=news">
<DIV class="sideItem" id="sideItem_news" onMouseOver="backgroundOn('sideItem_news')" onMouseOut="backgroundOff('sideItem_news')">
news
</DIV>
</A>
<A id="sideLink" HREF="?section=home&page=policies">
<DIV class="sideItem" id="sideItem_policies" onMouseOver="backgroundOn('sideItem_policies')" onMouseOut="backgroundOff('sideItem_policies')">
policies
</DIV>
</A>
<A id="sideLink" HREF="?section=home&page=policies#rights">
<DIV class="sideItem" id="sideItem_rights" onMouseOver="backgroundOn('sideItem_rights')" onMouseOut="backgroundOff('sideItem_rights')">
student's rights
</DIV>
</A>
<A id="sideLink" HREF="?section=about&page=contact">
<DIV class="sideItem" id="sideItem_contact" onMouseOver="backgroundOn('sideItem_contact')" onMouseOut="backgroundOff('sideItem_contact')">
contact us
</DIV>
</A>

</div>
<!-- remove this line - </div> -->
the_pm
10-04-2004, 08:38 PM
Well, first of all you're not allowed to declare more than one element with the same id. ids must be unique on the page. So that's one problem. But if you want to make things simple, instead of wrestling with IE's idiotic interpretation of DOM, try this:

<span onmouseover="this.style.background='#FF0'" onmouseout="this.style.background='#FFF'">Highlight Me!</span>

It produces about the same amount of code as the function you're trying to make work. The drawback of course is that it becomes difficult to make adjustments in the future, especially if the site grows to a large size (then even a good global search/replace could get bothersome).

This method, used in conjunction with includes, might be worthwhile. If only IE supported :hover pseudo-class on non-linking objects. Then you wouldn't have to rely on JS to pull this off. Of course, if only IE did a lot of things right...
mayonaise
10-05-2004, 02:56 PM
Originally posted by the_pm
Well, first of all you're not allowed to declare more than one element with the same id. ids must be unique on the page. So that's one problem.
ah yes, i'm aware of the multiple ids problem. however with IE at least, using <A class="myClass" HREF...> will not use the text color defined in the CSS "myClass" class style. so i used multiple IDs, just to make it a little bit easier on me. but i've changed it now, and it didn't solve the problem......

Originally posted by the_pm
But if you want to make things simple, instead of wrestling with IE's idiotic interpretation of DOM, try this:

<span onmouseover="this.style.background='#FF0'" onmouseout="this.style.background='#FFF'">Highlight Me!</span>
It produces about the same amount of code as the function you're trying to make work. The drawback of course is that it becomes difficult to make adjustments in the future, especially if the site grows to a large size (then even a good global search/replace could get bothersome).

This method, used in conjunction with includes, might be worthwhile. If only IE supported :hover pseudo-class on non-linking objects. Then you wouldn't have to rely on JS to pull this off. i'll keep playing with it and trying different things.. i don't expect anything to actually work, and it's not a major issue. it does still function in one way, and i know it's an IE-only problem, so i'm willing to live with that.

Originally posted by the_pm
Of course, if only IE did a lot of things right... you can say that again.. actually you could say that again about 30000 times and it still wouldn't be enough

seems like every day i find something new i don't like about IE
mayonaise
10-05-2004, 03:42 PM
Originally posted by mayonaise
ah yes, i'm aware of the multiple ids problem. however with IE at least, using <A class="myClass" HREF...> will not use the text color defined in the CSS note: i believe IE SHOULD do this, but in this case, for some reason, it doesn't
gogocode
10-06-2004, 02:41 AM
Theres probably a few things at play there. Firstly though, DIV is a block element (unless you've changed it through CSS) and as such is not allowed in A which is an inline element (unless you've changed it through CSS).

I think you'd be better to simply ditch the div's inside the anchors and use the anchor as the block element ("display:block") then you can use the :hover selector on the anchor to do what you want with no javascript involvement.


<style> <!--
.sideLink {
position: absolute;
display:block;
visibility: visible;
width: 150;
left: 0;
top: 67;
z-index: 0;
}
.sideLink:hover { background-color:#F0A61A;}
--> </style>
<A id="sideLink" HREF="?section=about&page=contact">
contact us
</A>