Solved

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

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

Enroll in May's Course of the Month

May’s Course of the Month is now available! Experts Exchange’s Premium Members and Team Accounts have access to a complimentary course each month as part of their membership—an extra way to increase training and boost professional development.

Question has a verified solution.

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

It's here again; Microsoft is launching a new version of Internet Explorer: Internet Explorer 9, with noticeable changes on its interface, functions and new tools. As they say on its promotional video: "It's time to play, on a more beautiful web", f…
#Citrix #Internet Explorer #Enterprise Mode #IE 11 #IE 8
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.
Shows how to create a shortcut to site-search Experts Exchange using Google in the Chrome browser. This eliminates the need to type out site:experts-exchange.com whenever you want to search the site. Launch the Search Engine Menu: In chrome, via you…

738 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