Solved

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

Posted on 2004-04-16
5
500 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
  • 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

Maximize Your Threat Intelligence Reporting

Reporting is one of the most important and least talked about aspects of a world-class threat intelligence program. Here’s how to do it right.

Join & Write a Comment

Suggested Solutions

Problem I downloaded the Microsoft Internet Explorer 9 Beta, today, to give it a test drive and maybe write a review for the site, and it failed miserably and got stuck in a crash restart loop. The error message given is as illustrated below i…
Several part series to implement Internet Explorer 11 Enterprise Mode
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.
This Micro Tutorial will demonstrate how nuggets on the Web are formatted by using Chrome Developer Tools. These tools would not only view the site's CSS but it can also modify it and save the CSS to use on your own site.

758 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

Need Help in Real-Time?

Connect with top rated Experts

22 Experts available now in Live!

Get 1:1 Help Now