Performance with CSS vs. attribute tags in IE?

[YandE]

Hi guys, I've run into a perplexing problem I'm hoping somebody can provide some insight into.

I'm in the process of recoding an internal web app I wrote a few years ago (converting asp to php) and cleaning up the html / javascript coding as I go along.

One of the pages I'm working on generates a dynamic table-based report. The table lines would have variable colors depending upon the data they were showing, I set these via font color and bgcolor attributes at the time the page was being generated. I also include a mouseover/mouseout in certain cells that would change the bgcolor for a hilight effect and open up a relevant popup when quicked. The report worked fine.

I've now revised the code to use a linked CSS file and use classes to set the table cell format (again, determined dynamically by the server side scripting when the page is generated), and the mouseover/mouseout events simply change the class for the appropriate effect.

So the new page works properly, except that when I load it in IE (6.0) it is very sluggish when the report generates more than a few table lines (and some of the results can span hundreds of table rows). The page scrolls "choppily", and there's about a 1-2 second delay before the mouseover events trigger a proper class change and creates a hilight effect. I've duplicated the problem on other systems with IE, so I'm ruling out a problem with my local system.

There's no additional script running on the client side on the page, either.

The perplexing thing is that when I load it into Firefox, it works exactly as the original report did (meaning no perceivable problem with performance).

Can anyone think of something I may be doing wrong that would bog down IE's rendering engine? I'm wondering if there are any caveats or rules I'm overlooking when dealing with classes or events in large tables?

Sorry if I'm being vague, I'm trying to keep this post brief (too late?), but any help or advice is appreciated...

Thanks,
KV

[David Harrison]

Can we see some of the HTML code that it spits out? Maybe there's a better way to do the rollover.
Vladdy has quite a nice one that uses the :hover psuedo-class with a VBScript fix for IE, that script runs nice and smooth. I'd find the link for it if I wasn't so tired.

In the mean time wrap your eyes around this (http://www.vladdy.net/Demos/CSSNav.html), it also uses the :hover psuedo-class and the fix for IE but to create a menu.

[YandE]

I don't have access to the actual app right now, but here's an approximation of the type of code I was using:

<tr>
<td id="cell1" bgcolor="red" onmouseover="this.style.bgcolor='gold';this.style.cursor='hand';cell2.style.bgcolor='gold';cell2.style.cursor='ha nd';" onmouseout="this.style.bgcolor='red';this.style.cursor='auto';cell2.style.bgcolor='red';cell2.style.cursor='auto ';" onclick="goReport('x');">
<font color="white"><b>Data output</b></font></td>
<td id="cell2" bgcolor="red" onmouseover="this.style.bgcolor='gold';this.style.cursor='hand';cell1.style.bgcolor='gold';cell2.style.cursor='ha nd';" onmouseout="this.style.bgcolor='red';this.style.cursor='auto';cell1.style.bgcolor='red';cell2.style.cursor='auto ';" onclick="goReport('x');">
<font color="white"><b>Data output</b></font></td>
</tr>

I replaced it with:

<tr>
<td id="cell1" class="negativeLine" onmouseover="this.className='hilight';cell2.className='hilight';" onmouseout="this.className='negativeLine';cell2.className='negativeLine';"
onclick="goReport('x');">
Data output
</td>
<td id="cell2" class="negativeLine" onmouseover="this.className='hilight';cell1.className='hilight';" onmouseout="this.className='negativeLine';cell1.className='negativeLine';"
onclick="goReport('x');">
Data output
</td>
</tr>

Most of the table cells are supposed to hilight only themselves, I used this snippet because I have two cells in each row that hilight each other, as well as themselves, with a mouseover. I realize it's crude, but it did the job. The id tags were specific to those cells, and were generated dynamically based on count so that I'd have something to refer to when changing the style or class of the other cell.

I had looked into behaviors before but never really worked with them, I thought they were IE-specific and wanted to move away from IE-dependent code (purely as a personal training exercise, our company is standardized on IE for internal apps so there's nothing wrong with going IE-only).

Anyways, thanks for your response, any input or ideas are appreciated...

Cheers,
KV

[David Harrison]

Just use some code similar to this:td{
background-color:#b00;
}
td:hover{
background-color:#f00;
}Then test it in Firefox, when you get it working incorporate the VBScript and behavior hack for IE and it should work then. You don't need to add id's to your tables because it's all done remotely by the CSS.

[Fang]

YandE why didn't you have the events firing on the TR?

[YandE]

Hi guys, thanks for the replies, sorry for the late post-back, I've been travelling and tied up with work...

lavalamp: I had stayed away from behaviors because I wanted to keep the new code from being IE-specific, but I'm exploring my options there. The reason I used the ID's was because in one specific case I needed a mouseover in any one of two adjacent cells to cause a highlight in both, I found it the easiest way to do it. However, I'm going to experiment with using code instead to modify the adjacent node directly, rather than by id, to see if reducing the "complexity" of the table code would help. I've come across some vague references in my digging that indicate performance issues in the way MS and Mozilla implement their handling of the DOM that can lead to performance issues. Don't know enough about it to know if that's really the case.

fang: I couldn't fire the event on the TR tag because certain individual cells within the row would open a different window, depending on the field (ie. if the report showed details of customer transactions, each row would have various fields and clicking on the customer name would open a window showing customer history, clicking on the item purchased would show sales history for that item etc.), so I needed to differentiate each individual cell to avoid confusion.

Appreciate the assistance and the input.

Thanks,
KV

[jbloom]

-

[jbloom]

My personal experience in IE is that using the CSS version from an attached CSS file:

td{
background-color:#b00;
}
td:hover{
background-color:#f00;
}

...is noticeably more sluggish than implementing in javascript. I'd love to learn why this is so. But for now, I just avoid using the CSS implementation for things that require immediate feedback.