Solved

this.className incompatibility between IE and Gecko-based browsers.

Posted on 2004-04-16
5
532 Views
Last Modified: 2008-02-07
Here's the html:
<tr onmouseover="this.className='mouseOverColor';document.getElementById('lnk').className='over';" onmouseout="this.className='mouseOutColor';document.getElementById('lnk').className='out';">
<td><div><a href="http://none.com/" id="lnk"></div></td>
</tr>

relevant css:
.mouseovercolor {
      background: #006699;
      color: #ffffff;
}

.mouseoutcolor {
      background: #ffffff;
      color: #000033;
}

a.over:link {
      background: none transparent scroll repeat 0% 0%;
      color: #ffffff;
      text-decoration: underline;
}

a.over:visited {
      background: none transparent scroll repeat 0% 0%;
      color: #ffffff;
      text-decoration: underline;
}

a.over:hover {
      background: none transparent scroll repeat 0% 0%;
      color:#ffffff;
      text-decoration: underline;
}

a.out:link {
      background: none transparent scroll repeat 0% 0%;
      color: #000033;
      text-decoration: underline;
}

a.out:visited {
      background: none transparent scroll repeat 0% 0%;
      color: #000033;
      text-decoration: underline;
}

a.out:hover {
      background: none transparent scroll repeat 0% 0%;
      color:#000033;
      text-decoration: underline;
}

It all works fine in IE, and the document.getElementById('lnk').className section works fine for the anchor tag in both browsers, however, this.className does not change the table row colors correctly in gecko-based browsers.

Any ideas?
0
Comment
Question by:frederichenry
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 2
5 Comments
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 10846810
The code you posted does not make a whole lot of sense to me.  There is no content.  IE will try and make sense of whatever it gets, but I do not understand what you actually expect to see so the browser probably has the same problem.

What are you trying to do with this?

Cd&
0
 
LVL 3

Author Comment

by:frederichenry
ID: 10847117
For some reason it seems to be happening on both browsers now, but I can't figure out why.  This is strange.

For an example, go here:

http://its.humber.ca/example/ie.htm

The table row is supposed to change colour when you rollover any area of it, and I was having problems with the anchor tag, so I added the document.getElementById('lnk').className in order to address it.

Regardless, it's weird that the onmouseover="this.className('')" doesn't seem to work in either browser on the example site above.

I think I've been looking at this too much.
0
 
LVL 53

Accepted Solution

by:
COBOLdinosaur earned 500 total points
ID: 10847205
Got it.

Events are implemented with Javascript which is case sensitive.  You are alos using an XHTML doctype, that makes the whole page case sensitive.  The classnames in the style sheet are all lower case but in the references in the events you are using mixed case to refer to the classes.

Cd&
0
 
LVL 3

Author Comment

by:frederichenry
ID: 10847234
I hate it when solutions are that simple. ;)

Thanks.  Points awarded.
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 10849481
There have been times where I have spent days looking for a complex solution, an then discover it was some simple thing.  I just smack myself in the head, and vow to never miss the simple things again.  Of course it does not work the simple things are the easies to miss and sometimes it just needs a second set of eyes.  Glad I could help.  Thanks for the A. :^)

Cd&
0

Featured Post

Ready to get started with anonymous questions?

It's easy! Check out this step-by-step guide for asking an anonymous question on Experts Exchange.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

After uninstalling Opera browser (for example ver. 10.63), your attempts to open a web page by clicking on a URL link may fail with an error message.  The error is "This operation has been canceled due to restrictions in effect on this computer. Pleā€¦
#Citrix #Internet Explorer #Enterprise Mode #IE 11 #IE 8
Google currently has a new report that is in beta and coming soon to Webmaster Tool accounts. This Micro Tutorial will highlight new features for Google Webmaster Tools.
This Micro Tutorial will demonstrate how to add subdomains to your content reports. This can be very importing in having a site with multiple subdomains.

628 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question