Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

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

Posted on 2004-04-16
5
Medium Priority
?
537 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 2000 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

How to Use the Help Bell

Need to boost the visibility of your question for solutions? Use the Experts Exchange Help Bell to confirm priority levels and contact subject-matter experts for question attention.  Check out this how-to article for more information.

Question has a verified solution.

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

I recently found myself in a Corporate Situation where the client had requested blocking access to any and all websites except his own Domain? Easy? I am sure this would be your answer but their requirement was, this has to be done without using…
SSL stands for “Secure Sockets Layer” and an SSL certificate is a critical component to keeping your website safe, secured, and compliant. Any ecommerce website must have an SSL certificate to ensure the safe handling of sensitive information like…
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.
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…
Suggested Courses

886 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