Solved

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

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

Microsoft Certification Exam 74-409

Veeam® is happy to provide the Microsoft community with a study guide prepared by MVP and MCT, Orin Thomas. This guide will take you through each of the exam objectives, helping you to prepare for and pass the examination.

Question has a verified solution.

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

I spend far too much time on the web keeping up with the news: politics, the environment, computer stuff, the Experts Exchange. It's never-ending. But many of the most informative web pages are overwhelmed with noise: scrolling banners, flashing tex…
If you are a web developer, you would be aware of the <iframe> tag in HTML. The <iframe> stands for inline frame and is used to embed another document within the current HTML document. The embedded document could be even another website.
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 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.

832 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